select list modified on-the-fly doesn't fire onChange() for new first element.

Posted by staremperor on Stack Overflow See other posts from Stack Overflow or by staremperor
Published on 2010-04-24T22:03:46Z Indexed on 2010/04/24 22:13 UTC
Read the original article Hit count: 159

Filed under:
|
|

In the code below, I'm using jquery 1.4.1 to modify the options in a select list when the user clicks on the list (replacing the single Old item with three New items). Selecting either New 2 or New 3 correctly fires the change() method (and show the alert), but selecting "New 1" does not. What am I missing? Thanks.

<html>
<head>
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script>
$(document).ready(function() {
   $("#dropdown").mousedown(function() {
      $(this).empty();
      $(this).append($("<option></option>").attr("value",100).text("New 1")); 
      $(this).append($("<option></option>").attr("value",200).text("New 2"));  
      $(this).append($("<option></option>").attr("value",300).text("New 3"));  
   });        
   $("#dropdown").change(function() {
      alert($(this).val());
   });        
});
</script>
<body>
<select id="dropdown"><option value="1">Old 1</option></select>

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery