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

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调用).

我将所有第二个选择值放在会话var中,但我的问题是只选择那些与第一个选择相关的值,所以我试图通过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隐藏选项似乎不能跨浏览器工作,即使最新版本的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/