jQuery 和 CSS : hide/show select options with a certain css class

Question

在 html 代码中，我有这样的选择选项:

  <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 变量中，但我的问题是只选择那些与第一个选择相关的值，所以我尝试通过 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

对我来说greenish的解决方案很好，但是在IE上有一个问题我没有解释清楚:当我使用后退按钮时，用户选择的值是“丢失”的，也就是说，如果我登录控制台用户选择的值，我在新的克隆选择中看到它的“索引”。在html源代码中，有整个原始选择。

EDIT4

感谢这篇文章，我解决了

https://forum.jquery.com/topic/jquery-select-box-selectedindex-problems-in-internet-explorer-ie-on-refresh-and-back-buttons

Answer 1

因此，当我正确理解您的问题时，您想使第二个选择字段的选项依赖于第一个选择字段中的所选值。

我很快尝试了这个，用 css 隐藏选项似乎无法跨浏览器工作，即使是 mac 上最新版本的 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 字段的选项并将它们保存在一个变量中。这使我能够从选择字段中实际删除选项，同时我仍然能够从副本中检索选项。

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

这是一个显示脚本运行的 fiddle :http://jsfiddle.net/Kn8Gc/

注意:如果您从数据库中获取数据并且用户已经选择了#firstSelect，只需使用selected="selected" 属性。 #secondSelect 将自动显示正确的值。只需尝试上面的 fiddle 并“预选”例如 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/