jQuery和css：隐藏/显示具有某个css类的选项 [英] jQuery and css: hide/show select options with a certain css class

问题描述

在html代码中，我选择了这样的选项：

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

在jQuery中：

  var cod = $（this）.val（）; //这是另一个select的值：当值
 $（option [class ^ = myclass]）。 
 $（option [class ^ = myclass]）。each（function（）{
 $（option [class ^ = myclass+ cod +] b $ b}）; 
   

EDIT

我有两个选择。当我在第一个选择中选择一个值时，第二个选择值必须相应填充（我必须防止ajax调用）。

一个会话变量，但我的问题是在选择只绑定到第一个选择，所以我尝试通过CSS类。

EDIT2

 < select name =firstselect> 
< option value =0selected =selected>选择...< / option> 
< option value =1> Value1< / option> 
< option value =2> Value2< / option> 
< option value =3> Value3< / option> 
< / select> 
 
< select name =secondselect> 
< option value =0selected =selected>选择...< / 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上有一个问题，我不能成功解释：当我使用后退按钮，用户选择的值是lost，也就是说，如果我登录控制台用户选择的值，我看到它的索引在新克隆的select中。在html源代码中，有整个原始选择。

EDIT4

我感谢这篇文章感谢了

https://forum.jquery.com/topic/jquery-select-box-selectedindex-problems-in-internet-explorer-ie-on-刷新和返回按钮

解决方案

因此，当我正确理解您的问题时，第二个选择字段取决于在第一个选择字段中选择的值。

我试过这个快速和隐藏一个选项与css似乎不工作跨浏览器，甚至最新版本的chrome不会隐藏选项。

所以我想出了以下方法：
$ b

HTML先：
我使用类来标记依赖关系。这允许在第二个选择字段中使用 value 属性，而不受限制。

条件将被更改，其他不会受到影响。这对于此场景中的默认值很有用。

 < select id =firstSelect> 
< option value =0selected =selected>选择...< / option> 
< option value =value1> Value1< / option> 
< option value =value2> Value2< / option> 
< option value =value3> Value3< / option> 
< / select> 
 
< select id =secondSelect> 
< option value =0selected =selected>选择...< / option> 
< option class =conditional value1value =subValue1> Value1：Sub1< / option> 
< option class =conditional value2value =subValue2> Value2：Sub1< / option> 
< option class =conditional value2value =subValue3> Value2：Sub2< / option> 
< option class =conditional value2value =subValue4> Value2：Sub3< / option> 
< option class =conditional value2value =subValue5> Value2：Sub4< / option> 
< option class =conditional value2value =subValue6> Value2：Sub5< / option> 
< option class =conditional value3value =subValue7> Value3：Sub1< / option> 
< option class =conditional value3value =subValue8> Value3：Sub2< / option> 
< option class =conditional value3value =subValue9> Value3：Sub3< / option> 
< / select> 
  

和Javascript：
为了使这项工作，我复制了 secondSelect 字段并将它们保存在变量中。这允许我从选择字段中实际地删除选项，而我仍然能够从副本中检索选项。

  $（function（）{
 var conditionalSelect = $（＃secondSelect），
 //保存可能的选项
 options = conditionalSelect。 child（。conditional）。clone（）; 
 
 $（＃firstSelect）。change（function（）{
 var value = $（this）.val 
 //删除所有条件选项
 conditionalSelect.children（。conditional）remove（）; 
 //附加需要为选定值显示的选项
 options.clone（）。filter（。+ value）.appendTo（conditionalSelect）; 
}）。trigger（change）; 
}）; 
  

这里是一个小提琴，显示脚本在操作中： http://jsfiddle.net/Kn8Gc/

注意：如果您从数据库获取数据，用户已选择#firstSelect，只需使用 selected =selected属性。 #secondSelect将自动显示正确的值。只需尝试上面的小提琴，并预选例如value1而不是0！

---

通用功能，可以很容易地使任何两个选择字段依赖于彼此（仍然使用类条件 + 源值创建关系）：

  //Generic函数
 $ .conditionalize = function（sourceSelect， conditionalSelect）{
 var options = conditionalSelect.children（。conditional）。clone（）; 
 
 sourceSelect.change（function（）{
 var value = $（this）.val（）; 
 conditionalSelect.children 
 options.clone（）。filter（。+ value）.appendTo（conditionalSelect）; 
}）trigger（change）; 
} 
 
 //像这样使用：
 $ .conditionalize（$（＃firstSelect），$（＃secondSelect））; 
  

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

In the html code I have select options like this:

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

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

EDIT

I have two select. When I select a value in the first select, the second one must be populated accordingly (I have to prevent an ajax call).

I put all the second select values in a session var, but my problem is in selecting only those ones tied to the first select, so I was trying through css classes.

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

For me greenish's solution is good, but there is an issue on IE that I don't succeed in explaining: when I use the back button, the user selected value is "lost", that is, if I log on the console the user selected value, I see its "index" in the new cloned select. In the html source code, there is the whole original select.

EDIT4

I resolved thanks to this post

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

解决方案

So when I understand your question correctly, you want to make the options of the second select field dependent of the selected value in the first select field.

I tried this quickly and hiding an option with css does not seem to work cross browser, even the latest version of chrome on mac won't hide the options.

So I came up with the following:

HTML first: I used classes to mark the dependencies. This allows the value attribute in the second select field to be used without restrictions.

Also, only options marked as conditional will be changed, the others won't be affected. This is useful for something like the Default value in this scenario.

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

And the Javascript: To make this work, I copied the options of the secondSelect field and saved them in a variable. This allows me to actually remove options from the select field while I'm still able to retrieve the options from the copy.

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

And here's a fiddle that shows the script in action: http://jsfiddle.net/Kn8Gc/

Note: If you get Data form a database and the user already selected #firstSelect, just use the selected="selected" attribute. #secondSelect will automatically display the correct values. Just try the fiddle above and "preselect" for example value1 instead of 0!

---

Also here's a "generic" function that can be used easily to make any two select fields dependent on eachother (still using the classes conditional+ source value to make the relation):

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

And here it is in action: http://jsfiddle.net/NUxQ9/

这篇关于jQuery和css：隐藏/显示具有某个css类的选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！