3

当用户从选择框中选择一个选项时，我正在尝试做某事 - 尽可能简单吗？我正在使用 JQuery 1.3.1 注册一个带有选择框 id 的点击处理程序。一切都很好，直到我使用 Chrome 和 Safari 进行测试并发现它不起作用。

  1. 火狐 3.05 - 是
  2. IE 7.0.5730.13 - 是
  3. IE6Eolas - 是的
  4. 萨拉菲 3.2.1 - 否
  5. 铬 1.0.154.43 - 否

见下面的代码：

<html>
<head>
    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
    <script language="javascript">
    $(document).ready(function(){
        $('#myoption').click(function() { alert('Select Dropdown was clicked: '+ $('#myoption').val()); });
    });     
    </script>
</head>
<body>
    <select id="myoption">
    <option value="A">A</option>
    <option value="B">B</option>
    </select>
</body>
</html>

有人知道我应该怎么做才能让它工作吗？警报最终会被触发，但只有在双击选择框后才会触发？

4

2 回答 2

5

我发现了我的问题。对于选择框，您需要为“更改”事件而不是“单击”事件注册处理程序。奇怪的是 Firefox 和 IE 使用 click 事件。

总而言之，以下代码适用于所有浏览器：

<html>
<head>
    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
    <script language="javascript">
    $(document).ready(function(){
        $('#myoption').change(function() { alert('Select Dropdown was clicked: '+ $('#myoption').val()); });
    });         
    </script>
</head>
<body>
    <select id="myoption">
    <option value="A">A</option>
    <option value="B">B</option>
    </select>
</body>
</html>
于 2009-01-23T08:35:09.997 回答
1

Safari 和 Chrome 都是基于 webkit 的浏览器。Webkit 使用操作系统中的本机下拉元素，而不是自己实现下拉菜单，不幸的是，本机下拉菜单不支持点击事件。出于同样的原因，它们也不支持选项元素的 CSS 或其他巧妙的技巧。

让这些工作的唯一跨浏览器方法是使用 <ul> 和大量 javascript 手动实现这一点。

于 2010-06-21T17:40:11.773 回答