gpt4 book ai didi

optgroup 上的 jQuery 过滤器

转载 作者:行者123 更新时间:2023-12-01 02:45:32 26 4
gpt4 key购买 nike

我有两个选择框。第一个是第二个的 optgroup 的列表。我的查询需要两者,但我想过滤第二个选择以仅显示区域 optgroup 以及从第一个选择时选择的校园。

这是我的代码:

<html>
<body>
<select name="region">
<option value="%">All</option>
<option value="A">Northwest</option>
<option value="B">North Central</option>
</select>
<select name="campus">
<option value="%">All</option>
<optgroup label="Northwest">
<option value="1">Gary</option>
<option value="2">Valparaiso</option>
<option value="3">East Chicago</option>
</optgroup>
<optgroup label="North Central">
<option value="4">South Bend</option>
<option value="5">Elkhart</option>
<option value="6">Warsaw</option>
</optgroup>
</select>
</body>
</html>

因此,如果有人从第一个选择西北,我想使用 jQuery 过滤第二个,所以现在看起来像这样:

<select name="campus">
<optgroup label="Northwest">
<option value="1">Gary</option>
<option value="2">Valparaiso</option>
<option value="3">East Chicago</option>
</optgroup>
</select>

甚至不确定这是否可行,这是我第一次尝试 jQuery,所以我迷失了。提前致谢。

最佳答案

尝试.hide()其他<optgroup> s,和.show()您想要的。

类似这样的事情:

$('select[name="region"]').change(function() {
var $sel = $('select[name="campus"]'),
val = $(this).val(),
campus = $('option:selected', this).text();
if (val === '%') {
$('option,optgroup', $sel).show();
}
else {
$('optgroup, optgroup > option', $sel).hide();
$('optgroup[label="' + campus + '"]', $sel).children().andSelf().show();
}
});​

你不能仅仅隐藏 <optgroup> ,您需要隐藏其子项 <option>也是。

演示:http://jsfiddle.net/rffwW/

编辑:似乎在 IE(显然还有 Safari)中不起作用。 Another answer建议包装<option>位于<span> s,让我们尝试一下:

$('select[name="region"]').change(function() {
var $sel = $('select[name="campus"]'),
val = $(this).val(),
campus = $('option:selected', this).text();
$('span > optgroup', $sel).unwrap();
if (val !== '%') {
$('optgroup:not([label="' + campus + '"])', $sel).wrap('<span/>');
}
});​

演示:http://jsfiddle.net/rffwW/1/

关于optgroup 上的 jQuery 过滤器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11652995/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com