使用 JQuery 过滤下拉菜单
我有 2 个下拉菜单。用户从第一个选项中选择某些内容，然后根据第一个选择来过滤第二个选项中显示的选项。
我的策略是 .hide() 第二个下拉列表中的所有选项（如果它们不相关）。
我编写的函数正确识别了第二个下拉列表中的哪些项目应隐藏，并将 style="display:none" 属性添加到这些选项。
问题是，当您从第一个下拉列表中选择某些内容后，第二个下拉列表中似乎没有任何内容。
这是所有的JS。 HTML 应该能够相当容易地推断出来。第二个下拉列表中的项目已标记有与第一个选项列表中的选项匹配的类名称。
$(document).ready(function () {
$('.part-type').change(function () {
$(this).show();
var part_type = "."+$(".part-type option:selected").text().toLowerCase();
$('.part').children().filter(":not("+part_type+")").hide();
})
});
感谢我所有的朋友。
链接到我在 JsFiddle 上的实际工作 --> http://jsfiddle.net/hwD8K/
I have 2 drop-down menus. User selects something from the first one, then the options that are displayed within the second are filtered based on the first selection.
My strategy is to .hide() all of the options in the second drop-down if they are not relevant.
The function I wrote properly identifies which items in the second drop-down list should be hidden and adds the style="display:none" attribute to those options.
The problem is that the second drop-down list appears to have nothing in it after you select something from the first.
Here is all the JS. The HTML should be able to be inferred fairly easily. The items in the second drop-down list have been tagged with a class name that matches an option from the first option list.
$(document).ready(function () {
$('.part-type').change(function () {
$(this).show();
var part_type = "."+$(".part-type option:selected").text().toLowerCase();
$('.part').children().filter(":not("+part_type+")").hide();
})
});
Thanks to all my friends on SO.
Link to my work in action on JsFiddle --> http://jsfiddle.net/hwD8K/
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
遗憾的是，您无法使用 CSS 来影响
select中option的显示。您最好的选择可能是将值存储在
select上的数据字段中，然后在每次更改时过滤该数据字段，并重新设置select的内容时间。或者，您可以从 DOM 中分离不需要的
option，然后稍后重新附加它们，而不是 show() 和 hide() 。有关于此的更多想法，请参阅此问题：
如何我用 JavaScript 隐藏选择选项？ （跨浏览器）
Unfortunately, you can't use CSS to affect the display of
options in aselect.Your best bet is probably to store the values in a data field on the
select, and then filter that data field on every change and re-set the contents of theselectevery time.Or, instead of show() and hide() you could probably detach the undesired
options from the DOM and reattach them later.For more thoughts on this, see this question:
How can I hide select options with JavaScript? (Cross browser)
在这里，我根据您的代码创建示例页面。
效果很好。
请检查一下。
Here I create sample page from your code.
It works fine.
please check it.