Question

I have a multi select dropdown eg:

<select id="myList" multiple="multiple">  
    <option value="1">Opt #1</option>
    <option value="2" selected="selected">Opt #2</option>
    <option value="3" selected="selected">Opt #3</option>
    <option value="4">Opt #4</option>
</select>

If I then selects Opt #4, how do I then only get Opt #4 and not Opt #2 and Opt #3? I know I can get all selected options by this:

var selectedOptions = $("#myList option:selected");

However I only want the option I clicked – Opt #4. Is this possible?

Edit: note that as I manipulate the list inside a change event I can’t do it in a click event. Also added missing multiple.

Answer 1

You can get it in the click handler for each option element:

$("#myList option").click(function() {
    var clickedOption = $(this);
});

---

Update

EDIT: As I manipulate the list inside a change event, I can’t do it in a click event.

In that case you need to delegate the event using on. Try this:

$("#myList").on("click", "option", function() {
    var clickedOption = $(this);
});

One thing to note, however, is that option elements will not raise click events at all in IE, so neither of the above will not work in that browser.