jQuery和css:使用某个css类隐藏/显示选择选项

因此,当我正确理解您的问题时,您希望在第一个选择字段中使第二个选择字段的选项取决于所选值.

我快速尝试了这个并且用css隐藏选项似乎不能跨浏览器工作,即使最新版本的Chrome也无法隐藏选项.

所以我想出了以下内容:

HTML优先:我使用类来标记依赖项.这允许在value没有限制的情况下使用第二选择字段中的属性.

此外,只有标记为的选项conditional才会更改,其他选项不会受到影响.这对于此方案中的"默认"值非常有用.

<select id="firstSelect">
   <option value="0" selected="selected">Choose...</option>
   <option value="value1">Value1</option>
   <option value="value2">Value2</option>
   <option value="value3">Value3</option>
</select>

<select id="secondSelect">
   <option value="0" selected="selected">Choose...</option>
   <option class="conditional value1" value="subValue1">Value1: Sub1</option>
   <option class="conditional value2" value="subValue2">Value2: Sub1</option>
   <option class="conditional value2" value="subValue3">Value2: Sub2</option>
   <option class="conditional value2" value="subValue4">Value2: Sub3</option>
   <option class="conditional value2" value="subValue5">Value2: Sub4</option>
   <option class="conditional value2" value="subValue6">Value2: Sub5</option>
   <option class="conditional value3" value="subValue7">Value3: Sub1</option>
   <option class="conditional value3" value="subValue8">Value3: Sub2</option>
   <option class="conditional value3" value="subValue9">Value3: Sub3</option>
</select>

和Javascript:为了使这项工作,我复制了secondSelect字段的选项并将它们保存在变量中.这使我能够remove从选择字段中实际选择,而我仍然可以从副本中检索选项.

$(function(){
    var conditionalSelect = $("#secondSelect"),
        // Save possible options
        options = conditionalSelect.children(".conditional").clone();

    $("#firstSelect").change(function(){
        var value = $(this).val();
        // Remove all "conditional" options               
        conditionalSelect.children(".conditional").remove();
        // Attach options that needs to be displayed for the selected value.
        options.clone().filter("."+value).appendTo(conditionalSelect);
    }).trigger("change");
});

这里有一个小提琴,显示了剧本的实际效果:http://jsfiddle.net/Kn8Gc/

注意:如果从数据库中获取数据并且用户已选择#firstSelect,则只需使用该selected="selected"属性.#secondSelect将自动显示正确的值.只需尝试上面的小提琴并"预选"例如value1而不是0!

另外这里是一个"通用"函数,可以很容易地使用任何两个选择字段依赖于彼此(仍然使用类conditional+ source value来建立关系):

// "Generic" function
$.conditionalize = function(sourceSelect, conditionalSelect){
    var options = conditionalSelect.children(".conditional").clone();

    sourceSelect.change(function(){
        var value = $(this).val();                  
        conditionalSelect.children(".conditional").remove();
        options.clone().filter("."+value).appendTo(conditionalSelect);
    }).trigger("change");
}

// Used like this:
$.conditionalize($("#firstSelect"), $("#secondSelect"));

在这里它是行动:http://jsfiddle.net/NUxQ9/