过滤基于另一个不工作
select元素我有JS是这样的:过滤基于另一个不工作
$(document).ready(function() {
$("#DDL1").change(function() {
var thisValue = $(this).val();
var $optGroups = $("#DDL2 optgroup");
$optGroups.hide();
switch (thisValue) {
case "11":
alert(thisValue);
$optGroups.filter("[label='label1']").show();
break;
}
});
});
基本上,基于第一DDL的选择。我想过滤:第二个..
当我运行这个,thisValue
= 11,这是我想要的。但是$optGroups
仍然会显示所有的可选值。而我只希望显示标签为label1
的optgroup下的值。
任何解释我可能做错了什么?
如果您DDL1是select
元素,那么原因可能是optgroup
和option
元素以一种特殊的方式通过浏览器处理,它可能无法通过CSS show
/hide
他们(jQuery的做什么)。
尝试动态地插入匹配optgroup
s这样的东西。
$(document).ready(function() {
// grab out the initial optgroups from the select and keep them in memory
var $optGroups = $("#DDL2 optgroup").detach();
$("#DDL1").change(function() {
var thisValue = $(this).val();
// remove all the current optgroups from the select
$("#DDL2 optgroup").detach();
switch (thisValue) {
case "11":
alert(thisValue);
// append the matching optgroups to the select
$optGroups.filter("[label='label1']").appendTo($("#DDL2"));
break;
}
});
});
请注意,代码仅用于示例目的,未经任何测试。
啊这工作。你能解释为什么你使用'detach'两次? –
首先我得到最初的optgroups,所以我把它们全部放在内存中。在每次更改时,我必须清空选择,因为它可以具有先前插入的“optgroup”。我可以使用'empty'或'remove',但我不确定它们的任何可能的副作用(例如'remove'可能会杀死某些事件处理程序或附加到它们的DOM数据等等)。如果你想从他们的父母中移出元素,'detach'是IMO最安全的方式。 –
谢谢!有没有关于为什么一些浏览器不使用show和hide选择元素的文档? –
如果你的'DDL1'是一个'select'元素,那么原因可能是'optgroup'和'option'元素被浏览器以特殊方式处理,并且可能无法'显示'/'通过CSS隐藏它们(jQuery所做的)。我认为解决方案是临时“移除”你不想展示的“optgroup”。 –
@ZoltánTamási好的,除了我想展示的标签之外,还有一种方法可以删除所有其他标签,而不必明确指定所有标签? –