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

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

我有一个关于我要完成的事情的简单设置。它几乎在工作。我可以让其他菜单将其值重置回选项列表中的第一个值。问题是，我正在更改的内容没有更改，只是停留在其默认值

希望我已经解释得足够好了。这里是指向JSFIDLE的链接

这是我的密码：

<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);
});



});        

选择项目类型
年度报告
品牌创建
小册子
零售标识
视频
网络开发
选择项目行业
消费品
教育
娱乐片
食物
保健
$（函数（）{
$（“选择”）。选择菜单({
menuWidth:170，
宽度：170，
最大高度：600
});
$（'select#type'）。更改（函数（）{
$（“选择行业”）。选择菜单（“索引”，0）；
});
$（'select#industry'）。更改（函数（）{
$（“选择类型”）。选择菜单（“索引”，0）；
});
});        

啊，算了吧

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

---

编辑：很高兴听到你明白了！是的，我试图找到一种方法来留住变革听众，但这比我想象的要困难得多，除非我遗漏了一些明显的东西。但是在锚元素上设置单击侦听器应该可以很好地解决这个问题。

只需要在下拉列表中的

a

上检测

click（）

，而不是

选择
上的
change（）
。以下是新的js：

$('ul#type-menu li a').click(function(){
    $("select#industry").selectmenu("index", 0);
});

$('ul#industry-menu li a').click(function(){
    $("select#type").selectmenu("index", 0);
});

您可以解除侦听器的绑定，但我认为更好的解决方案是添加和删除一个类（请参阅）。就你而言：

$('select#type').change(function(){
    if ($(this).hasClass('fired') == false) {
        $('select#type').addClass('fired');
        $('select#industry').selectmenu("index", 0);
    }
    $('select#industry').removeClass('fired');    
});

$('select#industry').change(function(){
     if ($(this).hasClass('fired') == false) {
        $('select#industry').addClass('fired');
        $("select#type").selectmenu("index", 0);
    }
    $('select#type').removeClass('fired');   
}); 

这是jsfiddle:
我想我已经弄明白了。我检测到的是单击，而不是更改。