Get clicked option in multiple dropdown

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.

Answer 2

As you know, If the user clicked on opt #4 without Cntrl key pressed, then you will only get Opt#4 as the selected option.

If the user clicked on opt #4 with Cntrl key pressed, then all three options will be selected. So all three options will be returned. If you want only Opt#4, then you would need to add a click event handler.

Answer 3

Would something like the following help you?

$('#myList').delegate('option', 'click', function (opt) {
  alert('Option ' + opt.value + ' was clicked');
});