简体   繁体   中英

onchange event not firing on <select> element

I am trying to call show() when the select dropdown changes, but the event is not firing.

<script type="text/javascript"> 
    function show() { 
        alert(document.getElementById("start").value); 
    } 
</script>

<div class="side-by-side clearfix" style="margin-bottom:14px;">
    <select  data-placeholder="Select Loacation" class="chzn-select" tabindex="2" name="source" id="start" onchange="show()">
      <option value="">Select Loacation</option>
      <c:forEach items="${listOfRoutes}" var = "route">
      <option value="${route.source }" >${route.source }</option>
      </c:forEach>
    </select>
</div>

Your html syntax is fine, so there could be an error with the show function. Check your console to make sure.

Edit: The event is fired on my end... hmm...

Looks fine. I think your getElementById fails to fetch what you want.

Here a small working example of what you want - but as stated. Your syntax looks fine.

<script type="text/javascript">        
  function hello() 
  {
    alert("hello");
  }
</script>

<select id="Select1" onchange="hello()">
  <option>1</option>
  <option>2</option>
</select>

Try

<script type="text/javascript"> 
   $("#start").change( function() { 
        alert($("#start").val()); 
    }); 
</script>

<div class="side-by-side clearfix" style="margin-bottom:14px;">
    <select  data-placeholder="Select Loacation" class="chzn-select" tabindex="2" name="source" id="start">
      <option value="">Select Loacation</option>
      <c:forEach items="${listOfRoutes}" var = "route">
      <option value="${route.source }" >${route.source }</option>
      </c:forEach>
    </select>
</div>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM