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

前端之家收集整理的这篇文章主要介绍了jQuery和css:隐藏/显示具有某个css类的选项前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
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 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

我感谢这篇文章

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

解决方法

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

我试过这个很快,并隐藏一个选项与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/

原文链接:https://www.f2er.com/jquery/182183.html

猜你在找的jQuery相关文章