Question

我使用select下拉列表通过为每个选择附加唯一的类来触发不同的事件。例如：

<select name='topic' class='long box validate-select'>
   <option value="null">Questions?</option>
   <option value='First' class='select1'>Question 1</option>
   <option value='Second' class='select2'>Question 2</option>
</select>

<div id="faq1"> - </div>
<div id="faq2"> - </div>

<script>
    $(document).ready(function() {
        $('option.select1').click(function(){
            $('#faq1').fadeIn('fast');
            return false;
        });
        $('.select2').click(function(){
            $j('#faq2').fadeIn('fast').siblings().hide();
            return false;
        });
    });
</script>

这在Firefox中运行良好..但在IE中没有任何作用（我检查了7和8）。有谁知道我应该怎么写这个让IE快乐？

Answer 1

尝试将.change()连接到选择列表。

$("select[name='topic']").change(function(){
   if($(this).val() === "First"){
     $('#faq1').fadeIn('fast');
   }
   if($(this).val() === "Second"){
     $j('#faq2').fadeIn('fast').siblings().hide();
   }
});

<强> Example on jsfiddle

Answer 2

我认为您不能依赖click元素来处理option元素。这是我如何做到这一点：

<select id="myselect" name='topic' class='long box validate-select'>
  <option value="null">Questions?</option>
  <option value='First' class='select1'>Question 1</option>
  <option value='Second' class='select2'>Question 2</option>
</select>
<div id="faq1" class="faq">
  question one
</div>
<div id="faq2" class="faq">
  question two
</div>
<script type="text/javascript">
  $(function () {

    $('.faq').hide();

    $('#myselect').change(function () {

      $('.faq').hide();
      switch ($('#myselect option:selected').val()) {
        case 'First':
          $('#faq1').fadeIn('fast');
          break;
        case 'Second':
          $('#faq2').fadeIn('fast');
          break;
      }

    });

  });

</script>

Answer 3

onclick会在整个下拉列表中触发，而不会触发单个项目。

Answer 4

我总体上和其他人一样得到了相同的答案，但另外如果您使用所有下拉选项做同样的事情，只需更改下拉列表中的值即可避免if或case语句。

一个例子是http://jsfiddle.net/UQKBQ/2/。第二个下拉列表的onchange功能比第一个更简单。

这里的关键是：

$('#'+this.value).fadeIn('fast').siblings().hide();

这使用下拉列表的值来构造您正在显示的div的ID。这种技术并不总是可行的，所以切换一个是很好的，但是在这样的一对一映射的情况下，将元素id存储在下拉列表的值中可以减少打字（或复制和粘贴）。

关于选择触发器的jQuery在ie中不起作用

4 个答案: