Custom jQuery script not working correctly after ASP.NET MVC 4 validation -

i using jquery enable , disable 2 separate textbox inputs , labels based on selection in dropbox (#drop1). here jquery script:

$(function () {     $("#drop1").change(function () {         if ($(this).val() == "iwr") {             showother()         }         else {             showiwr()         }     }); });  $(function () {     $("#drop1").ready(function () {         if ($(this).val() == "iwr") {             showother()         }         else {             showiwr()         }     }); });  function showother() {     $("#job").attr("disabled", "disabled").css({ "background-color": "#999", "display": "none" });     $("#job_row").css({ "display": "none" });     $("#project").removeattr("disabled").css({ "background-color": "#eff8fb", "display": "block" });     $("#proj_row").css({ "display": "block" }); }  function showiwr() {     $("#job").removeattr("disabled").css({ "background-color": "#eff8fb", "display": "block" });     $("#job_row").css({ "display": "block" });     $("#project").attr("disabled", "disabled").css({ "background-color": "#999", "display": "none" });     $("#proj_row").css({ "display": "none" }); } 

on page load, works intended. change dropbox, correct textbox , input display , hide expect. looking @ code, can see ids #job , #job_row should visible, while #project , #proj_row hidden , vice versa. when page loads get() job related labels , textbox ones visible.

the problem having after choose dropdown displays #project , #proj_row (drop1.val = "iwr"), if there error on page validator catches, page not load correctly. #job , #job_row visible though on reload drop1.val still = "iwr".

in case helps, here controller code:

    [httppost]     public actionresult create(qclog qclog)     {         if (qclog.job == null)         {             if (qclog.type != "iwr")             {                 modelstate.addmodelerror("job", "job required unless iwr.");             }             else             {                 if (qclog.project == null)                 {                     modelstate.addmodelerror("project", "project required iwrs.");                 }             }         }          if (modelstate.isvalid)         {             if (qclog.job != "iwr")             {                 string[] qcjob = qclog.job.split('-');                 int temp = convert.toint32(qcjob[0]);                 try                 {                     var job = jobdb.server5_job.single(j => j.job == temp);                     qclog.project = job.projectid;                     qclog.blend = job.blendlot;                 }                 catch (exception ex)                 {                     qclog.project = null;                     qclog.blend = null;                 }              }             else             {                 qclog.project = null;                 qclog.blend = null;             }             qclog.timestamp = datetime.now;             qclog.status = "incomplete";             db.qclogs.addobject(qclog);             db.savechanges();             //printlabel(qclog);             return redirecttoaction("index");         }         return view(qclog);     } 

and here view source of page, after error validation:

<tr class="transparent">                     <td class="transparent"><select id="drop1" name="type"><option value="fpi">fpi</option> <option selected="selected" value="iwr">iwr</option> <option value="final">final</option> <option value="sms">sms</option> <option value="incoming">incoming</option> <option value="gagerr">gage r+r</option> <option value="other">other</option> </select>                     </td>                     <td class="transparent"><span class="field-validation-valid" data-valmsg-for="type" data-valmsg-replace="true"></span>                     </td>                 </tr>                 <tr class="transparent">                     <td class="transparent">                         operation                     </td>                     <td class="transparent">                     </td>                 </tr>                 <tr class="transparent">                     <td class="transparent"><input class="text-box single-line" data-val="true" data-val-length="operation field cannot contain more 3 characters." data-val-length-max="3" data-val-required="operation required." id="operation" name="operation" type="text" value="020" />                     </td>                     <td class="transparent"><span class="field-validation-valid" data-valmsg-for="operation" data-valmsg-replace="true"></span>                     </td>                 </tr>                 <tr id="proj_row" class="transparent">                     <td  class="transparent">                         project (ex. 0730a)                     </td>                     <td class="transparent">                     </td>                 </tr>                 <tr class="transparent">                     <td class="transparent"><input class="input-validation-error text-box single-line" id="project" name="project" type="text" value="" />                     </td>                     <td class="transparent"><span class="field-validation-error" data-valmsg-for="project" data-valmsg-replace="true">project required iwrs.</span>                     </td>                 </tr>                 <tr id="job_row" class="transparent">                     <td class="transparent">                         job number (ex. 12345-1)                     </td>                     <td class="transparent">                     </td>                 </tr>                 <tr class="transparent">                     <td class="transparent"><input class="text-box single-line" data-val="true" data-val-length="job field cannot contain more 10 characters." data-val-length-max="10" id="job" name="job" type="text" value="" />                     </td>                     <td class="transparent"><span class="field-validation-valid" data-valmsg-for="job" data-valmsg-replace="true"></span>                     </td>                 </tr> 

my apologies in advance if code isn't efficient be. backend guy still getting ends , outs of frontend frameworks.

thanks help.

i figured out. instead of using:

$(function () {     $("#drop1").ready(function () {         if ($(this).val() == "iwr") {             showother()         }         else {             showiwr()         }     }); }); 

i had use document ready function, this:

$(document).ready(function () {     if ($("#drop1").val() == "iwr") {         showother()     }     else {         showiwr()     } }); 

this achieved effect looking for. can assume value of "#drop1" not set when control ready, set after document ready.