jQuery 和 css:隐藏/显示具有特定 css 类的选择选项
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/20381003/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery and css: hide/show select options with a certain css class
提问by Sefran2
In the html code I have select options like this:
在 html 代码中,我选择了这样的选项:
<option value="1" class="myclass5">Value1</option>
In jQuery:
在 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).
我有两个选择。当我在第一个选择中选择一个值时,必须相应地填充第二个值(我必须防止 ajax 调用)。
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.
我将所有第二个选择值放在一个会话变量中,但我的问题是只选择那些与第一个选择相关的值,所以我试图通过 css 类。
EDIT2
编辑2
<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
编辑3
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.
对我来说,greenish 的解决方案很好,但是 IE 上有一个问题我没有成功解释:当我使用后退按钮时,用户选择的值是“丢失”的,也就是说,如果我登录控制台,用户选择的值,我在新的克隆选择中看到了它的“索引”。在html源代码中,有完整的原始选择。
EDIT4
编辑4
I resolved thanks to this post
我解决了感谢这篇文章
回答by greenish
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.
我很快就尝试了这个,用 css 隐藏一个选项似乎不能跨浏览器工作,即使是 mac 上最新版本的 chrome 也不会隐藏这些选项。
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.
HTML 优先:我使用类来标记依赖项。这允许在value
没有限制的情况下使用第二个选择字段中的属性。
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.
此外,只有标记为的选项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>
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.
和 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");
});
And here's a fiddle that shows the script in action: http://jsfiddle.net/Kn8Gc/
这是一个显示正在运行的脚本的小提琴: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!
注意:如果您从数据库中获取数据并且用户已经选择了#firstSelect,则只需使用该selected="selected"
属性。#secondSelect 将自动显示正确的值。只需尝试上面的小提琴并“预选”例如 value1 而不是 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):
这里还有一个“通用”函数,可以很容易地使用它来使任何两个选择字段相互依赖(仍然使用类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"));
And here it is in action: http://jsfiddle.net/NUxQ9/
这是在行动:http: //jsfiddle.net/NUxQ9/
回答by greener
I'm not sure I completely understand your question but what about something like this:
我不确定我是否完全理解你的问题,但是这样的事情呢:
$(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, the dynamic writing option also exists:
或者,动态写入选项也存在:
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);
}
});
回答by Andy Jones
The only way I got this to work across browsers was to detach and then re-attach the options. I added a class to each option to also break the value of the option apart from its grouping. These two things may be related, but I won't assume that.
我让它跨浏览器工作的唯一方法是分离然后重新附加选项。我为每个选项添加了一个类,以将选项的值与其分组分开。这两件事可能是相关的,但我不会假设。
<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>
and the Javascript...
和 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");
});
Fiddle: http://jsfiddle.net/JbVWV/8/
小提琴:http: //jsfiddle.net/JbVWV/8/
Edit - I added the call to $("#firstselected").trigger("change")
on page load. So, if there is something selected in the first dropdown already, the second dropdown will already be populated correctly.
编辑 - 我$("#firstselected").trigger("change")
在页面加载时添加了调用。因此,如果已在第一个下拉列表中选择了某些内容,则第二个下拉列表将已正确填充。
回答by Selvakumar Arumugam
Hiding an option is not defined in all browser. It is not defined in the W3C specification.
隐藏选项并未在所有浏览器中定义。W3C 规范中没有定义它。
http://www.w3.org/TR/html401/interact/forms.html#h-17.6
http://www.w3.org/TR/html401/interact/forms.html#h-17.6
Disabling the option based on first select value
禁用基于第一个选择值的选项
You can disable the second option which will not allow the user to select the option.
您可以禁用不允许用户选择该选项的第二个选项。
DEMO:http://jsfiddle.net/HrpF2/
演示:http : //jsfiddle.net/HrpF2/
Code:
代码:
$(function () {
var $secondOptions = $('select[name=secondselect] option');
$("select[name=firstselect]").change(function () {
var value = $(this).val();
$secondOptions.prop('disabled', true).filter(function () {
return this.value == 'myclass' + value;
}).prop('disabled', false);
}).trigger("change");
});
Show/Hide options based on first select value
根据第一个选择值显示/隐藏选项
If you really want to show/hide options, then you need to clone the second options and add them back based on the first select value. See below,
如果你真的想显示/隐藏选项,那么你需要克隆第二个选项并根据第一个选择值将它们添加回来。见下文,
DEMO:http://jsfiddle.net/HrpF2/1/
演示:http : //jsfiddle.net/HrpF2/1/
Code:
代码:
$(function () {
var $secondOptions = $('select[name=secondselect]');
var $cloneOptions = $secondOptions.find('option').clone();
$("select[name=firstselect]").change(function () {
var value = $(this).val();
$secondOptions.empty().append($cloneOptions.filter(function () {
return this.value == 'myclass' + value;
}));
}).trigger("change");
});
回答by Brian Vanderbusch
Include a javascript object that has a mapping of selections
包含一个具有选择映射的 javascript 对象
this type of question comes up often in SPA development, and I've developed this approach. What I recommend is creating a javascript object with the different option lists, and object keys consisting of the names of the select fields which will cause sibling:after select fields to be dynamically created, by binding to the 'select' event of the dependent select element, and running a custom script to evaluate the selected option, parse your map, and then render options accordingly.
这种类型的问题经常出现在 SPA 开发中,我开发了这种方法。我推荐的是创建一个具有不同选项列表的 javascript 对象,以及由选择字段的名称组成的对象键,这将导致兄弟:在动态创建选择字段之后,通过绑定到依赖选择的“选择”事件元素,并运行自定义脚本来评估所选选项,解析您的地图,然后相应地渲染选项。
I've taken this concept, and created a pretty nifty shell, that should not only allow you to this between the two select elements you mention, but essentially allowing you to have as many depending select elements as you want... populating all of them based on the selection made in the dependent element. Here are the even cooler advantages:
我采用了这个概念,并创建了一个非常漂亮的外壳,它不仅应该允许您在您提到的两个选择元素之间进行此操作,而且基本上允许您根据需要拥有尽可能多的依赖选择元素......填充所有它们基于在从属元素中所做的选择。以下是更酷的优势:
- the html markup is extremely clean
- you can initialize dependencies on even the dynamically created dependee options
- the javascript code is very clean and precise
- this can easily be made modular, so it could be converted into a plugin or module with only a few lines of code
- easy to asynchronously create new options and asynchronously alter dependencies using
$.extend()
and the providedSelectOption
object - code is built in such a way that the different option lists can be injected into the
map
object by calling custom functions - will work on ANY ELEMENTthat can trigger the
select
event. Allowing you to use non-form elements and inject dropdown type functionality and still affect other elements (**works with Bootstrap!
- html 标记非常干净
- 您甚至可以初始化对动态创建的依赖项选项的依赖项
- javascript 代码非常干净和精确
- 这可以很容易地模块化,因此只需几行代码就可以将其转换为插件或模块
- 易于异步创建新选项并使用
$.extend()
提供的SelectOption
对象异步更改依赖项 - 代码是以这样一种方式构建的,即可以
map
通过调用自定义函数将不同的选项列表注入到对象中 - 将适用于可以触发事件的任何元素
select
。允许您使用非表单元素并注入下拉类型功能并仍然影响其他元素(**与 Bootstrap 一起使用!
I have created a gist to demonstrate the concepts. I have the initial shell listed here, but check the link to ensure you have the most updated version and information on this gist. (I may turn it into a plugin)
我创建了一个要点来演示这些概念。我在此处列出了初始 shell,但请检查链接以确保您拥有有关此要点的最新版本和信息。(我可能会把它变成一个插件)
https://gist.github.com/LongLiveCHIEF/7880119.js
https://gist.github.com/LongLiveCHIEF/7880119.js
form.html
表单.html
<head>
<script src="jquery.js"></script><!-- use .js for easier DOM manipulation, can be done without, using the native DOM api -->
<script src="selection-map.js"></script>
</head>
<body>
<!-- select name="" values will be used inside the map object to initialize watch -->
<!-- the custom data-selmap-cascade="" property initializes the dynamic functionality, and the value should be an
-- string array format, where the values are the names of the select field whose options will depend on this
-- elements selected option
-->
<select data-selmap-cascade="['secondselect','fourthselect']" name="firstselect">
<option data-selmap-set-cascade="['second-select : set2', 'fourth-select : set1']" value="0" selected="selected">Choose...</option>
<!-- list other options here, using the data-selmap-showselectfields settings for each dependent select field -->
</select>
<select class="selmap" name="secondselect">
<!-- will be created via selection-map.js -->
</select>
</body>
selection-map.js
选择-map.js
// first we map our dependencies
var map = {
secondselect: [ //high level keys are the fields that will cause cascades
'set1' : {[new SelectOption('','','')],[new SelectOption('','','')],[new SelectOption('','','')]} // this is an option list, with gets a name as a key
'set2' : {[new SelectOption('','','')],[new SelectOption('','','')],[new SelectOption('','','')]},
'set3' : {[new SelectOption('','','')],[new SelectOption('','','')],[new SelectOption('','','')]},
],
fourthselect: [
'set1' : {[new SelectOption('','','')],[new SelectOption('','','')],[new SelectOption('','','')]}
]
};
// now we make it easy to inject select options at any point
var SelectOption = function(text, value, dependenSelectFields){
return {}; //retun object with properties corresponding to the attributes and values of a specific option
}
//and now we kick off processing
var $primaryElements = $.data('selmap-cascade'); // create a collection consisting of any and all elements with selmap-cascade data option
//here we act when any designated dependent field has a selection change
$primaryelements.select(function(){
var mapkey = $(this + ':selected').data('selmap-set-cascade'); // get the data that will allow us to grab the proper select options for the dependent elements
//and now we render the correct option into the correct place in the DOM
});