Detecting when the user chooses an option from a dropdown

Question

I have a classic HTML select box:

Show:
<select name="show" id="showThreads">
   <option value="all" selected="selected">All</option>
   <option value="new">Only unread</option>
</select>

Now, I need JavaScript to make an Ajax request when the user changes the selection in the box (without jQuery). I have tried:

• Listening for clicks on the <option> tags, but it won't work for users using a keyboard or a touch device
• on an interval, looping though the <option> tags and checking if the selected one changes, but it seemed to trigger even when I simply hovered over the second option.

Is there a way of doing this that will work on all browsers/devices? Thanks!

Answer 1

function yourAjaxCall(something) {

}

<select name="choice1" size="1" onchange="yourAjaxCall(this);">
    <option value="one">first</option>
    <option value="two">second</option>
    <option value="three">third</option>
</select>

Answer 2

Try the "change" event.

document.getElementById("showThreads").onchange = function() {

};

Answer 3

Listen for onChange on the <select> tag.