javascript Onchange 事件在选择框中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12574520/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Onchange event not working in select box
提问by Ajith
I added a dropdownlistusing seblod extension in joomla. But the javascript is not working for this.
我dropdownlist在 joomla 中添加了一个using seblod 扩展。但是 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>
回答by Zoltan Toth
Move your script to the bottom of the page - after the DOM element you're binding the listener to.
将您的脚本移到页面底部 - 在您将侦听器绑定到的 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:
JS：
<script type="text/javascript">
alert('onload');
document.getElementById('countrynames').addEventListener('change',function(){
alert('Hello');
});
</script>
回答by SReject
You script is executing before the select element is created. here's the fix:
您的脚本在创建 select 元素之前正在执行。这是修复：
<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>
回答by Littm
You may try to put your code in a function which will be called by the <body>tag's onloadmethod:
您可以尝试将您的代码放在一个函数中，该函数将被<body>标签的onload方法调用：
Your JS script:
你的JS脚本：
<head>
<script type="text/javascript">
function mload() {
alert('onload');
document.getElementById('countrynames').addEventListener('change',function() {alert('Hello');
});
}
</script>
</head>
In your <body>add:
在您<body>添加：
<body onload="javascript: mload()">
Hope this helps. Let me know if this works for you.
希望这可以帮助。让我知道这是否适合您。
