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);
});

Get clicked option in multiple dropdown

Sign up