Onchange事件不能在选择框中工作

我在joomla中使用seblod扩展添加了dropdownlist。但JavaScript不适合这个。Onchange事件不能在选择框中工作

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

来源

2012-09-24 Ajith

在页面上存在select元素之前，您的脚本正在运行。 –

请注意，更改事件在各种浏览器中的行为有所不同。尝试使用键盘导航在IE中选择一个选项，并查看它是否按预期工作。 – RobG

将您的脚本移动到页面的底部 - 在绑定侦听器的DOM元素之后。

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>

来源

2012-09-24 23:57:23

我只是将jsfiddle代码复制粘贴到我的代码上，但执行时没有任何反应。可能是什么问题呢？谢谢。 – Ajith

你有想过吗？ –

您脚本在选择元素之前执行的创建。这里的修复：

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

来源

2012-09-25 00:24:46 SReject

您可以尝试把你的代码中将由<body>标签的onload方法被调用函数：

你的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()">

希望这会有所帮助。让我知道这是否适合你。

来源

2012-09-25 00:25:08 Littm

Onchange事件不能在选择框中工作

回答

相关问题