Событие Onchange не работает в поле выбора

Я добавил dropdownlist, используя расширение seblod в joomla. Но javascript для этого не работает.

<html>
    <head>
        <script type="text/javascript">
            alert('onload');
            document.getElementById('countrynames').addEventListener('change',function(){
                alert('Hello');
            });
        </script>
    </head>

    <body>
        <select size="1" class="inputbox select " name="countrynames" id="countrynames">
            <option selected="selected" value="">- Select an option -</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
        </select>
    </body>
</html>

javascript onchange
person Ajith    schedule 24.09.2012    source источник
comment
Ваш скрипт запускается до того, как на странице появится элемент select.   -  person Andrew Whitaker    schedule 25.09.2012
comment
Обратите внимание, что событие изменения ведет себя по-разному в разных браузерах. Попробуйте использовать навигацию с помощью клавиатуры, чтобы выбрать параметр в IE, и посмотрите, работает ли он должным образом.   -  person RobG    schedule 25.09.2012

Ответы (3)


arrow_upward
3
arrow_downward

Переместите свой скрипт в нижнюю часть страницы — после элемента DOM, к которому вы привязываете прослушиватель.

ДЕМО

<select size="1" class="inputbox select " name="countrynames" id="countrynames">
<option selected="selected" value="">- Select an option -</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>

JS:

<script type="text/javascript">
    alert('onload');
    document.getElementById('countrynames').addEventListener('change',function(){
         alert('Hello');
    });
</script>

person Zoltan Toth    schedule 24.09.2012
comment
Я просто скопировал код jsfiddle поверх своего кода, но при его выполнении ничего не происходит. В чем может быть проблема? Спасибо. - person Ajith; 25.09.2012

arrow_upward
0
arrow_downward

Ваш сценарий выполняется до создания элемента выбора. вот исправление:

<html>
    <head>
        <script type="text/javascript">
            window.onload = function(){
                alert('onload');
                document.getElementById('countrynames').addEventListener('change',function(){
                    alert('Hello');
                });
            }
        </script>
    </head>

    <body>
        <select size="1" class="inputbox select " name="countrynames" id="countrynames">
            <option selected="selected" value="">- Select an option -</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
        </select>
    </body>
</html>
person SReject    schedule 25.09.2012

arrow_upward
0
arrow_downward

Вы можете попробовать поместить свой код в функцию, которая будет вызываться методом onload тега <body>:

Ваш скрипт JS:

<head>
    <script type="text/javascript">

        function mload() {
            alert('onload');
            document.getElementById('countrynames').addEventListener('change',function()      {alert('Hello');

            });
        }
    </script>
</head>

В <body> добавьте:

<body onload="javascript: mload()">

Надеюсь это поможет. Дайте мне знать, если это работает для вас.

person Littm    schedule 25.09.2012