javascript - 带有选择框的jQuery

我试图根据其他选择框的选择值显示/隐藏一些选择框选项（“ accType”将决定在“ otherBank”中显示什么，而选定的“ otherBank”将决定在“ otherBankBranch”中显示什么）

HTML标记如下

<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代码如下

 $(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()

显示隐藏功能在Firefox上可以正常使用，但在IE，Chrome中则不能。有人可以帮我吗

这是因为<option>无法接受style="display:none"

最佳答案

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

将accType，otherbank，otherbankbranch设置为id而不是name，并且我正在使用禁用的属性。

关于javascript - 带有选择框的jQuery，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/4067083/