JQuery with select boxes

Question

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!=".")
     $('.'+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() 

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"

Answer 1

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');
});

Answer 2

我会根据选择添加/删除选项元素，而不是尝试设置style="display:none" 。

Answer 3

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.