1

我正在使用 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);
});



});
4

3 回答 3

0

只需要检测下拉列表中的 aclick()而不是. 这是新的js：achange()select

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

$('ul#industry-menu li a').click(function(){
    $("select#type").selectmenu("index", 0);
});
于 2013-01-18T16:27:55.447 回答
0

您可以取消绑定侦听器，但我认为更好的解决方案是添加和删除一个类（请参阅暂时抑制 jQuery 事件处理）。在你的情况下：

$('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/

于 2013-01-18T16:31:28.577 回答
0

啊，想通了！

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

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

于 2013-01-18T15:59:50.530 回答