JQuery with select boxes

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")

HTML markup as follows

<label>Account Type</label>
<select name="accType">
 <option value="A" selected="selected">Bank Account</option>
 <option value="C">Other Bank Credit Card</option>
</select>

<label>Bank</label>
<select name="otherBank">
<option value=".">-- Select Bank --</option>
 <option class="A" style="display:none;" value="7010">BANK OF XXXXXXXXXX</option>
 <option class="A" style="display:none;" value="7083">ABC BBBB BANK</option>
 <option class="C" style="display:none;" value="7038">BBBBSSSS BANK</option> 
 <option class="C" style="display:none;" value="7092">ADFASDFSADF BANK</option>
</select>   

<label>Branch</label>
<select name="otherBankBranch">
 <option value=".">-- Select Branch --</option>
 <option class="7010" style="display:none;" value="590">XXXXXXXXX</option>
 <option class="7010" style="display:none;" value="690">BBBBBBBBBBBBBBB</option>
 <option class="7083" style="display:none;" value="657">ADSA AD ASDADS </option>
 <option class="7083" style="display:none;" value="531">EEEEEEEEE DS</option>
 <option class="7038" style="display:none;" value="089">TERTER E</option> 
 <option class="7092" style="display:none;" value="754">SDFSFSAAAAAAAAAA</option> 
 <option class="7092" style="display:none;" value="590">AAEEEEEEEFFFFFFFF</option>
</select>

JQuery Code as follows

 $(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!=".")
     $('.'+sSelect开发者_开发问答Value).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() 

Display hide function is working fine with Firefox but not in IE, Chrome. Can someone help me on this

Is this because <option> can not accept style="display:none"

---

With jQuery there is no need to use:

css("display", "block"); 

These handy functions will do it for you:

$('#selector').show();
$('#selector').hide();

You cannot hide options but you can disable them. You could remove them or use something like JQuery's .load() to get the next select box using ajax when the first one is selected, this is how I would do it.

$('.target').change(function() {
  $('#somediv').load('/url/to/next/input');
});

---

jQuery('#accType').click(function(){
        if((jQuery("#accType").val() == "otherbank")) {
            jQuery('#Otherbank').attr("disabled", false);
        }
        else{
            jQuery('#Otherbank').attr("disabled", true);
        }
});

    var newOptions1 = {
        'ccc' : 'ccc',
        'bbb' : 'bbb',
        'aaa' : 'aaa',
        'yyy' : 'yyyy'
    };  
       var newOptions1 = {
        'dd' : 'dd',
        'ee' : 'ee',

    };

jQuery('#Otherbank').click(function(){
        if((jQuery("#otherbank").val() == "aaa")) {
            jQuery('#Otherbankbranch').attr("disabled", false);

                              var select = $('#otherbankbranch');
                          var options = select.attr('options');
                      $('option', select).remove();

                          $.each(newOptions, function(val, text) {
                       options[options.length] = new Option(text, val);
                      });


        }
            /*** add other cases ***/
        else{
            jQuery('#otherbankbranch').attr("disabled", true);
        }
});

Set accType , otherbank, otherbankbranch as id instead of name and i'm using disabled property.

---

I would add / remove the option elements based on the selection, rather than trying to set style="display:none".