Question

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

我有一个jsfiddle设置我正在努力完成的事情。它几乎可以工作。我可以使用其他菜单将其值重置为选项列表中的第一个值。问题是我正在改变的那个没有改变，它只是保持默认值。

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

这是我的代码：

<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更改了一个选择下拉列表的值，两个更改侦听器也将最终被触发。

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

Answer 2

只需检测下拉列表中click()上的a而不是change()上的select。这是新的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);
});

Answer 3

您可以取消绑定侦听器，但我认为更好的解决方案是添加和删除一个类（请参阅Suppress jQuery event handling temporarily）。在你的情况下：

$('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：http://jsfiddle.net/JEfMD/

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

3 个答案: