Javascript onchange select не работает

#javascript #html

#javascript #HTML

Вопрос:

Я пытаюсь создать событие onchange, используя javascript для элемента select. Но он не работает, какой-нибудь намек на то, что я делаю неправильно?

Скрипт..

 <script type="text/javascript">
function check() {
   alert("Hi");
}
</script>
 

HTML..

 <body> 
<select name="selTitle" id="titles" onchange="check();">
<option value="Mr.">Mr.</option>
<option value="Ms.">Ms.</option>
</select>
</body>
 

Демонстрация — http://jsfiddle.net/jq9UA/1 /

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

1. Где происходит слияние скрипта с вашим HTML-документом?

2. предоставленный вами код сработал для меня. Я не включил скрипт в тег заголовка.

3. @Vikas- Не знаю, почему это так. Для меня это работает только тогда, когда скрипт находится внутри head.

Ответ №1:

Проблема в скрипте заключается в том, что код JavaScript выполняется в ответ на событие загрузки окна (по умолчанию на скрипке). Любой выполняемый вами код определяется в контексте обратного вызова load, а не в глобальной области. Если вы просмотрите фактический сгенерированный HTML-код для фрейма, вы обнаружите, что он выглядит следующим образом

 $(window).load(function(){
    function check() {
     alert("Hi");
  }

});
 

Это означает, что ваш код определяет check функцию, которая является локальной для обратного вызова загрузки, но обработчик событий хочет вызвать глобально определенную check функцию.

Чтобы исправить это, вам нужно использовать один из параметров скрипки, который определяет JavaScript в глобальном контексте. Попробуйте «no wrap (head)».

Скрипка: http://jsfiddle.net/jq9UA/3 /

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

1. @JaredPar- Это работает.. но я не понимаю, как вы это делаете на скрипке. Код выглядит аналогично.

2. @Buxme: посмотрите на настройки с левой стороны ( no wrap (head) ).

Ответ №2:

Я протестировал это и работает отлично:

 <script name="text/javascript">
    function check() {
      alert("Hi");
    }
</script>    

<body>
<select name="selTitle" id="titles" onchange="check();">
<option value="Mr." value="1">Mr.</option>
<option value="Ms." value="2">Ms.</option>
</select>
</body>