JQuery 下拉菜单适用于 Firefox，但不适用于 Google Chrome答案

【问题标题】：JQuery dropdown works on Firefox but not on Google ChromeJQuery 下拉菜单适用于 Firefox，但不适用于 Google Chrome
【发布时间】：2010-10-19 08:26:17
【问题描述】：

首先代码可能很糟糕，因为我是 JQuery 新手。我有这个 html：

<select name="numberItems" id="id_numberItems"> 
<option value="1" selected="selected">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
<option value="5">5</option> 
</select>
<fieldset class="dropdownList"> 
     [...]
</fieldset>
<fieldset class="dropdownList"> 
     [...]
</fieldset>  <!-- This fieldset is repeated 5 times -->

这是我的 Jquery 代码：

// Dropdown
function dropDown(val) {
    $('.dropdownList').hide();
    $('.dropdownList:lt(' + val + ')').show();
}

$("#id_numberItems").click(function() { dropDown($('#id_numberItems').val()) });

这个 dropDown 的东西在 Firefox 上有效，但在 Google Chrome 上无效¿为什么？谢谢

【问题讨论】：

用 Chrome 打开你的页面，“Ctrl + Shift + J” -> 控制台，点击你的下拉菜单，看看控制台出了什么问题。也许这可以提供一些有用的信息。
你们有演示页面吗？
我试过 CTRL + Shift + J 但我不知道调试内联脚本的热度，它不在单独的文件中。使用 FireBug 在 Firefox 中调试很顺利。
我现在没有演示页面，我正在使用本地开发服务器。如有必要，我可以尝试设置一个。

标签： javascript jquery firefox google-chrome

【解决方案1】：

将你的 dropDown 函数附加到你的下拉列表的 change-event 上，它应该按照你想要的方式工作（或者我的水晶球建议我......）

$("#id_numberItems").change(function() { dropDown($('#id_numberItems').val()) });

example on jsbin.com

【讨论】：

我不确定规范对选择元素的点击行为有何规定。当您像其他浏览器一样单击选项时，Chrome 不会调用 select 的单击事件。在页面加载后的第一次单击中，由于“预选”，您将获得“1”作为值。下次单击选择时，您将获得先前选择的值，依此类推。因此，如果没有特殊原因，您应该始终使用 onchange-event。
就可访问性而言，此处更改事件也是一个更好的选择，因为无论用户是通过鼠标还是键盘与页面交互，它都会被调用。