javascript - Onchange event not working in select box

I added a dropdownlist using seblod extension in joomla. But the javascript is not working for this.

<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>

I added a dropdownlist using seblod extension in joomla. But the javascript is not working for this.

<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>

Share Improve this question edited Sep 25, 2012 at 0:18 pb2q 59.7k19 gold badges150 silver badges152 bronze badges asked Sep 24, 2012 at 23:53 Ajith 3051 gold badge3 silver badges10 bronze badges

Your script is running before the select element exists on the page. – Andrew Whitaker Commented Sep 24, 2012 at 23:57
Note that the change event behaves differently in various browsers. Try using keyboard navigation to select an option in IE and see if it works as expected. – RobG Commented Sep 25, 2012 at 0:42

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

Move your script to the bottom of the page - after the DOM element you're binding the listener to.

DEMO

<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>

You script is executing before the select element is created. here's the fix:

<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>

You may try to put your code in a function which will be called by the <body> tag's onload method:

Your JS script:

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

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

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

In your <body> add:

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

Hope this helps. Let me know if this works for you.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Onchange event not working in select box - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)