javascript - jQuery selectmenu - 多个菜单，当一个菜单更改时重置其他菜单的值？

Question

我正在使用 selectmenu 插件来设计我网站上的一些选择菜单。我在我的网站上使用它们作为过滤功能。我希望用户一次只能按一个菜单进行过滤。因此，当用户在一个菜单上选择一个选项时，另一个菜单上的值需要返回到默认选项。

我有一个 jsfiddle 设置我想要完成的任务。它快要工作了。我可以让其他菜单将其值重置回选项列表中的第一个值。问题是我正在更改的值并没有改变，它只是保持默认值。

希望我已经解释得足够好。这是 jsfiddle 的链接......

http://jsfiddle.net/dmcgrew/FBzFL/

这是我的代码:

<select name="type" id="type">
<option value="*" selected="selected">Select Project Type</option>
<option value=".annualreport">Annual Report</option>
<option value=".branding">Branding</option> 
<option value=".brochures">Brochures</option>
<option value=".retail-signage">Retail Signage</option>
<option value=".video">Video</option>
<option value=".web">Web Development</option>       
</select>

<select name="industry" id="industry">
<option value="*" selected="selected" class="default">Select Project Industry</option>
<option value=".consumergoods">Consumer Goods</option>
<option value=".education">Education</option>
<option value=".entertainment">Entertainment</option>
<option value=".food">Food</option>
<option value=".healthcare">Healthcare</option>
</select>

$(function(){            


$('select').selectmenu({
menuWidth: 170,
width: 170,
maxHeight: 600
});

$('select#type').change(function(){
$("select#industry").selectmenu("index", 0);
});

$('select#industry').change(function(){
$("select#type").selectmenu("index", 0);
});



});        

Answer 1

啊，明白了!

当您以编程方式更改一个选择下拉列表的值时，它将触发附加到该元素的任何更改监听器。因此，即使您通过 UI 更改一个选择下拉列表的值，两个更改监听器最终都会被触发。

编辑:很高兴听到你想通了!是的，我试图找到一种方法来留住变更监听者，但这比我想象的要困难得多，除非我错过了一些明显的东西。但是在 anchor 元素上设置点击监听器应该可以很好地解决这个问题。