선택 상자에서 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 이벤트가 작동하지 않습니다.

답변

관련 문제