title: JQuery with select boxes
body: <p>I'm trying to Display/Hide some select box options depending on the select values from another select boxes ("accType" will decide what to show in "otherBank" and selected "otherBank" will decide what to show in "otherBankBranch")  </p>
  
  <h2>HTML markup as follows</h2>
  
  <pre><code>&lt;label&gt;Account Type&lt;/label&gt;
  &lt;select name="accType"&gt;
   &lt;option value="A" selected="selected"&gt;Bank Account&lt;/option&gt;
   &lt;option value="C"&gt;Other Bank Credit Card&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;label&gt;Bank&lt;/label&gt;
  &lt;select name="otherBank"&gt;
  &lt;option value="."&gt;-- Select Bank --&lt;/option&gt;
   &lt;option class="A" style="display:none;" value="7010"&gt;BANK OF XXXXXXXXXX&lt;/option&gt;
   &lt;option class="A" style="display:none;" value="7083"&gt;ABC BBBB BANK&lt;/option&gt;
   &lt;option class="C" style="display:none;" value="7038"&gt;BBBBSSSS BANK&lt;/option&gt; 
   &lt;option class="C" style="display:none;" value="7092"&gt;ADFASDFSADF BANK&lt;/option&gt;
  &lt;/select&gt;   
  
  &lt;label&gt;Branch&lt;/label&gt;
  &lt;select name="otherBankBranch"&gt;
   &lt;option value="."&gt;-- Select Branch --&lt;/option&gt;
   &lt;option class="7010" style="display:none;" value="590"&gt;XXXXXXXXX&lt;/option&gt;
   &lt;option class="7010" style="display:none;" value="690"&gt;BBBBBBBBBBBBBBB&lt;/option&gt;
   &lt;option class="7083" style="display:none;" value="657"&gt;ADSA AD ASDADS &lt;/option&gt;
   &lt;option class="7083" style="display:none;" value="531"&gt;EEEEEEEEE DS&lt;/option&gt;
   &lt;option class="7038" style="display:none;" value="089"&gt;TERTER E&lt;/option&gt; 
   &lt;option class="7092" style="display:none;" value="754"&gt;SDFSFSAAAAAAAAAA&lt;/option&gt; 
   &lt;option class="7092" style="display:none;" value="590"&gt;AAEEEEEEEFFFFFFFF&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <h2>JQuery Code as follows</h2>
  
  <pre><code> $(function(){
    var selAccType     = "select[name='accType']";
    var selAccTypeVal  = $(selAccType).val();   
  
    var sel       = "select[name='otherBank']";
    var selVal    = $(sel).val();   
  
  
    if(selAccTypeVal != "."){
     $('.'+selAccTypeVal).css("display", "block"); 
    }
  
  
    $(selAccType).bind('change keyup keydown',function() {
     var sSelectValue = $(this).val();
  
     $("select[name='otherBank'] option[value='.']").attr("selected","selected");
     $("select[name='otherBankBranch'] option[value='.']").attr("selected","selected");
  
     if(selAccTypeVal != "."){
      $('.'+selAccTypeVal).css("display", "none"); 
      if(selVal!=".")
       $('.'+selVal).css("display", "none"); 
     } 
  
     if ((selAccTypeVal != sSelectValue)){
      if(sSelectValue!=".")
       $('.'+sSelectValue).css("display", "block");  
  
      selAccTypeVal = sSelectValue;
     }    
    }); //END     
  
  
  
    if(selVal != "."){
     $('.'+selVal).css("display", "block"); 
    }
  
    $(sel).bind('change keyup keydown',function() {
     var sSelectValue = $(this).val().trim();
  
     $("select[name='otherBankBranch'] option[value='.']").attr("selected","selected"); 
  
     if(selVal != "."){
      $('.'+selVal).css("display", "none");  
     } 
  
     if ((selVal != sSelectValue)){
      if(sSelectValue!=".")
       $('.'+sSelectValue).css("display", "block");  
  
      selVal = sSelectValue;
     }     
  
    }); //END 
  
   }); //END $(function() 
  </code></pre>
  
  <p>Display hide function is working fine with Firefox but not in IE, Chrome. Can someone help me on this</p>
  
  <p>Is this because <code>&lt;option&gt;</code> can not accept <code>style="display:none"</code></p>