Question

我正在尝试显示/隐藏一些选择框选项，具体取决于来自其他选择框的选择值（“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"

Answer 1

使用jQuery不需要使用：

css("display", "block");

这些方便的功能将为您完成：

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

您无法隐藏选项，但可以禁用它们。您可以删除它们或使用类似JQuery的.load（）之类的东西，在选择第一个选项时使用ajax获取下一个选择框，这就是我要做的。

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

将accType，otherbank，otherbankbranch设为id而不是name，我正在使用disabled属性。

带有选择框的JQuery

HTML标记如下

JQuery代码如下

3 个答案: