Javascript 如何在填充选择下拉列表中添加搜索筛选器
我有2个选择下拉列表,其中基于第一个下拉列表的值为1。现在我想在第二个填充下拉列表中添加搜索过滤器。我如何做到这一点?我在搜索过滤器中使用了很多插件,比如SOL,但都不起作用。请帮忙。下面是我的代码 HTMLJavascript 如何在填充选择下拉列表中添加搜索筛选器,javascript,jquery,html,drop-down-menu,Javascript,Jquery,Html,Drop Down Menu,我有2个选择下拉列表,其中基于第一个下拉列表的值为1。现在我想在第二个填充下拉列表中添加搜索过滤器。我如何做到这一点?我在搜索过滤器中使用了很多插件,比如SOL,但都不起作用。请帮忙。下面是我的代码 HTML <select name="industry" id="industry" class="industry" style="width:305px;" onchange="configureDropDownLists(this,document.getElementById('pro
<select name="industry" id="industry" class="industry" style="width:305px;" onchange="configureDropDownLists(this,document.getElementById('product_type')); func2();" required>
<option value="" disabled="disabled" selected>Choose Industry*</option>
<option value="Agriculture & Food">Agriculture & Food</option>
<option value="Apparel, Textiles & Accessories">Apparel, Textiles & Accessories</option>
<option value="Auto & Tranportation">Auto & Tranportation</option>
<option value="Bags, Shoes & Accessories">Bags, Shoes & Accessories</option>
<option value="Electronics">Electronics</option>
<option value="Gifts, Sports & Toys">Gifts, Sports & Toys</option>
</select>
<select name="product_type" id="product_type" style="width:305px;">
</select>
选择行业*
农业与食品
服装、纺织品及配件
自动运输
包、鞋和配件
数码产品
礼品、运动和玩具
Javascript
function configureDropDownLists(ddl1,ddl2) {
var AgricultureFood = ['Agricultural Growing Media', 'Agricultural Waste', 'Animal Products', 'Beans'];
var ApparelTextilesAccessories = ['Apparel Design Services', 'Apparel Processing Services', 'Apparel Stock'];
switch (ddl1.value) {
case 'Agriculture & Food':
ddl2.options.length = 0;
for (i = 0; i < AgricultureFood.length; i++) {
createOption(ddl2, AgricultureFood[i], AgricultureFood[i]);
}
break;
case 'Apparel, Textiles & Accessories':
ddl2.options.length = 0;
for (i = 0; i < ApparelTextilesAccessories.length; i++) {
createOption(ddl2, ApparelTextilesAccessories[i], ApparelTextilesAccessories[i]);
}
break;
default:
ddl2.options.length = 0;
break;
}
}
function createOption(ddl, text, value) {
var opt = document.createElement('option');
opt.value = value;
opt.text = text;
ddl.options.add(opt);
}
功能配置下拉列表(ddl1、ddl2){
var AgricultureFood=[‘农业生长介质’、‘农业废弃物’、‘动物产品’、‘豆类’];
var ApparelTextilesAccessories=[“服装设计服务”、“服装加工服务”、“服装库存”];
开关(ddl1.value){
案例“农业与食品”:
ddl2.options.length=0;
对于(i=0;i
现在我想在第二个选择下拉列表中添加搜索过滤器(Id=product\u type)。提前谢谢 您可以通过实现jQuerymultiselect插件来实现您的目标 这是示例代码。您只需要在下拉列表创建完成后调用此函数
<!--css for multiselect-->
<link href="css/jquery.multiselect.css" rel="stylesheet" />
<link href="css/jquery.multiselect.filter.css" rel="stylesheet" />
<!--JS for multiselect-->
<script src="js/jquery.multiselect.js"></script>
<script src="js/jquery.multiselect.filter.js"></script>
<script type="text/javascript>
//Initialize first-time when dropdown created or on page load.
jQuery("#product_type").multiselect({
minWidth: 360, multiple: false,
selectedList: 1
}).multiselectfilter({width:250});
function configureDropDownLists(ddl1,ddl2) {
var AgricultureFood = ['Agricultural Growing Media', 'Agricultural Waste', 'Animal Products', 'Beans'];
var ApparelTextilesAccessories = ['Apparel Design Services', 'Apparel Processing Services', 'Apparel Stock'];
switch (ddl1.value) {
case 'Agriculture & Food':
ddl2.options.length = 0;
for (i = 0; i < AgricultureFood.length; i++) {
createOption(ddl2, AgricultureFood[i], AgricultureFood[i]);
}
break;
case 'Apparel, Textiles & Accessories':
ddl2.options.length = 0;
for (i = 0; i < ApparelTextilesAccessories.length; i++) {
createOption(ddl2, ApparelTextilesAccessories[i], ApparelTextilesAccessories[i]);
}
break;
default:
ddl2.options.length = 0;
break;
}
jQuery('#product_type').multiselect('refresh');
}
function createOption(ddl, text, value) {
var opt = document.createElement('option');
opt.value = value;
opt.text = text;
ddl.options.add(opt);
}
</script>
当填充第二个下拉列表时,这不适用于onchange事件。您只需要从上面的链接读取API。您需要使用multiselect的“Click”回调。要处理onchange事件,您需要调用multiselect的刷新函数。请参阅更新的答案谢谢您的回复。你能更新我的代码来实现这一点吗。这对我很有帮助,谢谢。