<option value="1" class="myclass5">Value1</option>
在jQuery中：
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();
});
编辑
我有两个选择。当我在第一次选择中选择一个值时，必须相应地填充第二个值(我必须防止ajax调用)。
我把所有第二个选择值放在一个session var中，但是我的问题是只选择那些绑定到第一个select的那些，所以我正在尝试通过css类。
EDIT2
<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>
EDIT3
对于我来说，绿色的解决方案是好的，但IE上有一个问题，我没有成功解释：当我使用后退按钮时，用户选择的值是“丢失”，也就是说，如果我登录控制台用户选择的值，我在新的克隆选择中看到它的“索引”。在html源代码中，有整个原始的选择。
EDIT4
我感谢这篇文章
解决方法
我试过这个很快，并隐藏一个选项与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/
