jQuery和css:隐藏/显示某个css类的选择选项
jQuery和css:隐藏/显示某个css类的选择选项
提问于 2013-12-05 00:41:56
在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();
});编辑
我有两个选择。当我在第一个select中选择一个值时，必须相应地填充第二个值(我必须防止ajax调用)。
我将所有的第二个select值放在一个会话变量中，但我的问题是只选择那些与第一个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
对我来说，greenish的解决方案是好的，但有一个关于IE的问题，我没有成功地解释:当我使用后退按钮时，用户选择的值是“丢失的”，也就是说，如果我在控制台上登录用户选择的值，我会在新克隆的select中看到它的“索引”。在html源代码中，有整个原始的select。
EDIT4
多亏了这篇文章，我下定决心了
回答 5
Stack Overflow用户
回答已采纳
发布于 2013-12-08 06:48:31
因此，当我正确理解您的问题时，您希望使第二个选择字段的选项依赖于第一个选择字段中的选定值。
我很快就试过了，用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字段的选项，并将它们保存在一个变量中。这允许我实际从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/
注意:如果您从数据库中获取数据，并且用户已经选择了# selected="selected" ，则只需使用firstSelect属性即可。#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/
Stack Overflow用户
发布于 2013-12-07 05:28:48
我不确定我是否完全理解你的问题，但是这样的事情怎么样：
$(document).ready(function(){
var cod = '';
$('select[name="firstselect"]').change(function(){
cod = $(this).val();
if ( cod > 0 ) {
$('select[name="secondselect"] option').hide().filter(function(){
return ( $(this).val().substr(7,1) == cod || $(this).val() == 0 );
}).show();
}
});
});Alternatively，动态写入选项也存在：
var dataset = [
{ set: 1, data: [
{ val: "value11", label: "Value 1 - 1" },
{ val: "value12", label: "Value 1 - 2" },
{ val: "value13", label: "Value 1 - 3" } ]
},
{ set: 2, data: [
{ val: "value21", label: "Value 2 - 1" },
{ val: "value22", label: "Value 2 - 2" },
{ val: "value23", label: "Value 2 - 3" } ]
}];
var chooser = "<option value='0' selected='selected'>Choose...</option>";
$('select[name="firstselect"]').change(function(){
var n = $(this).val(); //get value of data set
if ( n != 0 ) {
var str = chooser; n--; //0-based n
for (i=0; i<dataset[n].data.length; i++) { //write options
str += "<option value='" + dataset[n].data[i].val + "'>" + dataset[n].data[i].label + "</option>"
}
$('select[name="secondselect"]').html(str).attr("disabled",false);
}
});Stack Overflow用户
发布于 2013-12-08 12:17:23
我让它跨浏览器工作的唯一方法是分离，然后重新附加选项。我向每个选项添加了一个类，以便将选项的值与其分组分开。这两件事可能是相关的，但我不会假设这一点。
<select name="firstselect" id="firstselect">
<option value="0" selected="selected">Choose...</option>
<option value="1">Value1</option>
<option value="2" selected>Value2</option>
<option value="3">Value3</option>
</select>
<select name="secondselect" id="secondselect">
<option value="0">Choose...</option>
<option value="myclass1" class="group1">Value11</option>
<option value="myclass1" class="group1">Value12</option>
<option value="myclass1" class="group1">Value13</option>
<option value="myclass2" class="group2">Value21</option>
<option value="myclass2" class="group2">Value22</option>
<option value="myclass2" class="group2">Value23</option>
<option value="myclass3" class="group3">Value31</option>
<option value="myclass3" class="group3">Value32</option>
<option value="myclass3" class="group3">Value33</option>
</select>还有Javascript。
var groups = false;
function update_selected() {
// reset the secondselect
$("#secondselect").val(0);
$("#secondselect").find("option[value!=0]").detach();
// re-attach the correct options
$("#secondselect").append(groups.filter(".group" + $(this).val()));
}
$(function() {
// initialize by detaching all the options (except for the "Choose..." option)
groups = $("#secondselect").find("option[value!=0]");
groups.detach();
// add the onchange event handler
$("#firstselect").change(update_selected);
// immediately call update_selected to update on page load
$("#firstselect").trigger("change");
});小提琴：http://jsfiddle.net/JbVWV/8/
Edit -我在页面加载时添加了对$("#firstselected").trigger("change")的调用。因此，如果在第一个下拉列表中已经选择了某些内容，则第二个下拉列表将已经正确填充。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20381003
复制相关文章
相似问题