Jquery – 基于combobox的筛选器列表框
我有两个列表显示汽车公司，第二个显示所有汽车
这是第一个comboxbox（第一个选项是ALL）
ALL GM Honda Ford 这是我的第二个lisbox
Chevy [GM] Buick [GM] Civic [Honda] Accord [Honda] Focus [Ford]
基于第一个combox选择，我应该只显示第二个列表中的汽车公司汽车。 即使是第二个列表也有括号中的汽车公司名称。这是固定格式。 再次从第一个列表中，如果用户选择“全部”，我应该显示所有车辆。
任何机构都可以给我一个实现这个或代码片段的想法吗？
谢谢你的帮助
问候
基兰
并非所有浏览器都允许您隐藏下拉列表中的各个项目，因此您需要保留主列表，然后根据该列表重新填充。
var names = $('#names option').clone(); $('#company').change(function() { var val = $(this).val(); $('#names').empty(); names.filter(function(idx, el) { return val === 'ALL' || $(el).text().indexOf('[' + val + ']') >= 0; }).appendTo('#names'); });
据我所知，隐藏选择选项仅适用于Firefox，因此对于跨浏览器兼容性，您需要使用更多的技巧（请参阅此SO问题和此问题等）。 这是我的建议：
对于HTML，请提供您选择的隐藏副本以及您当前提供的版本：
使用CSS display:none隐藏basenames 。
然后，对于您的jQuery，您将定期用克隆版本的baseNames替换names并过滤它。
$(document).ready(function() { $("#company").change(function() { $("#namesDiv").empty(); $("#baseNames").clone().appendTo("#namesDiv").attr("id", "names"); var val = $(this).find("option:selected").val(); if(val !== "ALL") { $("#names option").each(function() { if($(this).val().indexOf(val) < 0) { $(this).remove(); } }); } }); });
你可以看到这个在行动 。
编辑：仅在FF中工作
试试这个：
$(function(){ $("#company").change(function(){ var val = $(this).val(); $("#names option").hide().filter(function(){ var regExp = new RegExp("\\[" + val + "\\]$"); return (val == "ALL") || regExp.test($(this).text()); }).show(); }); });
示例： http ： //jsfiddle.net/Chandu/2Zppp/
http://css-tricks.com/dynamic-dropdowns/
这是你想尝试使用文本文件的第一个选项或替代选项是JSON 。
另一种选择是为这些选项分配一个类名：
然后基于类，你可以像这样show（）和hide（）：
$(document).ready(function(){ $("#names>option").hide(); $("#company").change(function(){ $("#names>option").hide(); $("#names>." + $(this).val()).show(); if($(this).val() == "ALL"){ $("#names>option").show(); } }); });
您可以在第一个选择的change（）中的第二个选择选项上的每个（），搜索子字符串并设置disabled属性。 （但是这个解决方案有一个缺陷：并非每个浏览器都支持选项AFAIK的禁用属性。）
UPDATE
如果要完全隐藏选项，则应考虑将第二个选项中的项目存储在某个临时存储中，并仅使用符合条件的项目重新填充从存储中选择的项目。
UPDATE2
var temp = new Array(); $(document).ready(function(){ //save in temp $('select#names').children().each(function(){temp.push($(this).val());}); //change handler $('select#company').change(function(){ var pref = $(this).val(); $('select#names').children().remove(); for(i=0;i'+temp[i]+''); } }); });
编辑：测试并使用IE7和Firefox 3.6.x.
现场演示
HTML： 注意ALL选项上的value=""
jQuery的：
$('#company').change(function() { var make = $(this).val(); $('#names').contents().each(function() { if (this.nodeType == 8 && this.nodeValue.length > 0 && this.nodeValue.indexOf(make) != -1) { $(this).before(''); $(this).remove(); } else if ($(this).val().indexOf(make) == -1 && $(this).val().length > 0) { $(this).replaceWith(''); } }); });