jQuery和css：隐藏/显示具有某个css类的选项

<option value="1" class="myclass5">Value1</option>

var cod = $(this).val(); // This is the value of another SELEct: when the value 
$("option[class^=myclass]").hide();
$("option[class^=myclass]").each(function () {
    $("option[class^=myclass" + cod + "]").show();
});

<SELEct name="firstSELEct">
   <option value="0" SELEcted="SELEcted">Choose...</option>
   <option value="1">Value1</option>
   <option value="2">Value2</option>
   <option value="3">Value3</option>
</SELEct>

<SELEct name="secondSELEct">
   <option value="0" SELEcted="SELEcted">Choose...</option>
   <option value="myclass1">Value11</option>
   <option value="myclass1">Value12</option>
   <option value="myclass1">Value13</option>
   <option value="myclass2">Value21</option>
   <option value="myclass2">Value22</option>
   <option value="myclass2">Value23</option>
   <option value="myclass3">Value31</option>
   <option value="myclass3">Value32</option>
   <option value="myclass3">Value33</option>
</SELEct>

所以当我正确地理解你的问题时，你想在第一个选择字段中使第二个选择字段的选项取决于所选择的值。

我试过这个很快，并隐藏一个选项与CSS似乎不工作的跨浏览器，即使最新版本的chrome在mac也不会隐藏的选项。

所以我想出了以下几点：

HTML首先：
我使用类来标记依赖关系。这样可以无限制地使用第二个选择字段中的值属性。

此外，只有标记为条件的选项将被更改，其他选项将不会受到影响。这对于这种情况下的Default值很有用。

<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字段的选项并将其保存在变量中。这使我能够从选择字段中实际删除选项，而我仍然可以从副本中检索选项。

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

这里还有一个“通用”函数，可以轻松地使任何两个依赖于彼此的选择字段(仍然使用类条件源值进行关系)：

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