Блог

Главная - Вопросы по программированию - Выпадающий список OnClick работает в FireFox, но не в Chrome или IE?

Выпадающий список OnClick работает в FireFox, но не в Chrome или IE?

#javascript #drop-down-menu #cross-browser

#javascript #выпадающее меню #кроссбраузерный

Вопрос:

Следующий код отлично работает в Firefox, но не в IE или Chrome… Есть идеи, почему?

 <script type="text/javascript">
function display_div(show){
   document.getElementById('passenger1').style.display = "none";
   document.getElementById('passenger2').style.display = "none";
   document.getElementById('passenger3').style.display = "none";
   document.getElementById(show).style.display = "block";
}
</script>

<select name="#" id="#">
      <option selected="selected"> </option>
      <option onClick="display_div('passenger1');">1</option>
      <option onClick="display_div('passenger2');">2</option>
      <option onClick="display_div('passenger3');">3</option>
</select>

<div id="passenger1" style="display:none;"> hey, 1 works </div>
<div id="passenger2" style="display:none;"> hey, 2 works </div>
<div id="passenger3" style="display:none;"> hey, 3 works </div>

Ответ №1:

Переместите onChange function

http://jsfiddle.net/WmEAp/

Комментарии:

1. К сожалению, это означает, что ваш вызов javascript не завершится во второй раз, если вы выберете ту же опцию. Кто-нибудь знает хорошее решение для этого?

Ответ №2:

переместите «onClick» из options в элемент select

 <select onchange="this(this.selectedIndex)">
    <option value="passenger1">1</option>

Ответ №3:

параметр onclick on не является допустимым обработчиком кликов. Вместо этого используйте onchange при выборе.

Ответ №4:

IE и Chrome не распознают события в элементах опции выбора. Вы можете удалить события onclick из своих опций и добавить следующее событие onchange в свой элемент select, чтобы заставить его работать с вашим текущим кодом:

 onchange="display_div('passenger'   this.value);"