Блог

Я использую выпадающий список выбора для запуска различных событий, прикрепляя уникальные классы к каждому выбору. Например :

 <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 счастливым?

Вместо этого попробуйте подключить .change() к списку выбора.

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

Пример в jsfiddle

Я не думаю, что вы можете полагаться на 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>
  

onclick срабатывает для выпадающего элемента в целом, а не для отдельных элементов.

В целом я получил тот же ответ, что и другие, но, кроме того, если вы делаете то же самое со всеми вашими выпадающими опциями, вы можете избежать операторов if или case, просто изменив значения в вашем выпадающем списке.

Примером является http://jsfiddle.net/UQKBQ/2 / . Второй выпадающий список имеет гораздо более простую функцию onchange, чем первый.

Здесь ключевая строка:

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

Это использует значение выпадающего списка для построения идентификатора вашего div, который вы показываете. Этот метод не всегда возможен, поэтому полезно знать switch one, но в случае такого однозначного сопоставления, как это, сохранение идентификатора элемента в значении выпадающего списка может значительно сократить ввод текста (или копирование и вставку).