Selected Index changed event in javascript for html control

Question

I have an HTML control:

<select id="grade">

I want to get the selected value of dropdown on selected Index changed event.

I tried to add following code which would be called on drop down selection change, but seems it doesnot work. Any other suggestion ?

$("#grade").on('change', function() { 
alert("hi"); 
});

Also, how can I get the selected value in Java Script.

score 12 · Answer 1 · answered Oct 10 '16 at 07:31

Here is an alternative for those who don't need jQuery:

<select id="grade" onchange="OnGradeChanged(this.value);">
     <option value="1">1</option>
     <option value="2">2</option>
</select>
<script>
function OnGradeChanged(value){
     alert(value);
}
</script>

score 4 · Answer 2 · edited Oct 21 '12 at 20:28

4

You can also try:

$(document).ready(function(){
  $('#grade').change(function() {
    alert('Handler for .change() called.');
    alert($(this).val()); 
  });
});

edited Oct 21 '12 at 20:28

pmr

58,701
10
113
156

answered Oct 21 '12 at 20:04

COLD TOLD

13,513
3
35
52

score 4 · Accepted Answer · answered Oct 21 '12 at 20:07

If ID=grade doesn't exist when code is run, you need to delegate the handler to a permanent asset in the page. This can be any element selector up the tree from your eleemnt or body or document itself. This method will work regardless if selector already exists, or will exist in future

$(document).on('change',"#grade", function() { 
     alert( $(this).val())
});

If the ID does exist, your code should work so long as you have wrapped it in *document.ready*

$(function(){
/* your code*/

})

Thanks, this is what I've been looking for. And for me, it also works without using document.ready — Christhofer Natalius, Apr 27 '16 at 06:12

Selected Index changed event in javascript for html control

3 Answers3