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.

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.

• javascript
• jquery
• jquery-selectors

• What do you want to achieve? If you want to get the "clicked" option, why is a multi select? – MatuDuke Commented May 3, 2012 at 12:32
• 2 Did you miss to add multiple attribute to select tag? – sv_in Commented May 3, 2012 at 12:32
• You've missed the mulitple="multiple" attribute off your select. Other than that it should work. – phuzi Commented May 3, 2012 at 12:45

4 Answers 4

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.

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.

Would something like the following help you?

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

The real answer:

select.onclick = function(e) {
  console.log(e.target.value);
};