jquery - 从选择字段单击选项时 Jquery 显示 div 在 Chrome 中不起作用

Question

当我单击选择字段的选项时，我确实尝试了一个非常简单的测试来显示一行。它确实适用于我相信的所有浏览器，除了 Chrome。它什么都不做，当我检查 javascript 调试控制台时，它甚至没有给出错误。

<select name="test">
    <option value="1">one</option>
    <option value="2" id="show_div">two</option>
</select>

<div id="show_block" style="display:none;">it works!</div>

非常简单的jquery

$('#show_div').click(function(){
    $('#show_block').show();
});

我尝试而不是单击，更改，但在 Chrome 中没有结果。想法？

Answer 1

$('select[name="test"]').change(function() {
    if ($(this).find('#show_div').is(':selected'))
        $('#show_block').show();
});​

现场演示

Answer 2

您不应该将单击事件绑定到选择列表中的项目，您应该绑定到整个选择的单击，然后检查选择了哪个项目，如下所示：

$('select').change(function(){
    if ($(this).val() == 2)
    {
          $('.show_block').show();
     }
  });

这个问题是类似的：在chrome中选择选项元素上的点击事件

Answer 3

您的 select 元素上没有 id 属性，但您在 Jquery 代码中通过 id 引用它。这在 chrome 中有效，这里在JsFiddle中。

HTML

<select id="show_div" name="test">
  <option value="1">one</option>
  <option value="2" id="show_div">two</option>
</select>
<div id="show_block" style="display:none;">it works!</div>

jQuery

$('#show_div').change(function(){
  $('#show_block').show();
});​