Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

help with jquery onchange event on dropdown menu

I would like to be able to launch an alert message everytime the value of the dropdown is changed. I thought the code below should have worked but it is not for some unknow reason. Any ideas why?

Thanks.

<html>
<head>
<script type="text/javascript" src="lib/jquery.js"></script>
</head>
<body>

<script type="text/javascript">
    $("select").change(function(){
        alert(this.id);
    });
</script>


<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

</body>
</html>
like image 410
nunos Avatar asked May 22 '11 21:05

nunos


2 Answers

The code is fine, you just aren't initialising it correctly.

Try....

$(document).ready(function() {
    $("select").change(function(){
        alert(this.id);
    });
});

see the documentation here.

Your function alerts the id of the select element (which you haven't assigned to anything anyway). I'm assuming you actually wanted to get the value from the dropdown? In which case you want:

alert($(this).val());
like image 87
fearofawhackplanet Avatar answered Oct 16 '22 10:10

fearofawhackplanet


Register the onchange handler once the DOM is ready on page load.

$(function() {

   $("select").change(function(event) {
        alert(this.id);
        // alert( $(this).attr('id') ); to get the id attr with jquery
    });

});

I would also suggest targeting the select element with an id. Your code will show an alert every time any select on the page is changed.

like image 38
Rob Cowie Avatar answered Oct 16 '22 09:10

Rob Cowie