Question

I am trying to do something very simple but it’s not working for me. All I want to do is get the selected option’s text when the selected option is changed, something like this:

<select id = "myselect">
  <option value = "1">One</option>
  <option value = "2">Two</option>
  <option value = "3">Three</option>
</select>

Then in JavaScript:

$("#myselect").change(function () {
     var text = $(this).find("option[selected]").html();
     alert(text);
});

Simple right? The problem is I am just getting null. When I inspect the DOM I find that changing the selected option does not change the “selected” attribute of any of the options. Doesn’t changing the option typically update the DOM? I’m pretty sure I’ve done this before. What I am missing here? I am using FireFox ver 13.0.1 for my testing.

Answer 1

This should do it using jQuery:

$("#myselect").change(function () {
    var text = $(':selected',this).text();
    alert(text);
});​

jsFiddle example

Or, if you want to use just plain JavaScript:

document.getElementById('myselect').onchange = function() {
    alert(document.getElementById("myselect")[document.getElementById("myselect").selectedIndex].innerHTML);
}

jsFiddle example