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.

What do you want to achieve? If you want to get the "clicked" option, why is a multi select? — MatuDuke, May 03 '12 at 12:32
You've missed the `mulitple="multiple"` attribute off your `select`. Other than that it should work. — phuzi, May 03 '12 at 12:45

Rory McCrossan · Accepted Answer · 2018-10-20T17:51:01.063

9

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.

edited Oct 20 '18 at 17:51

answered May 03 '12 at 12:32

Rory McCrossan

319,460
37
290
318

This will add a single event handler to each option. If you ever added options after calling this, the new options will not work as expected. Please look at my solution on how to avoid this problem. – Daniel Baulig May 03 '12 at 12:36
I forgot to mention that I manipulate the list inside a change event, so I can't do it in a click event. – Frets May 03 '12 at 12:48
Note that for multiple select, you can unchecked options, so you may need to check if the option is selected or not with $(this).is(':selected'). – Frank Sebastià Jul 12 '16 at 11:35
I know this is old, but people who are looking for a general solution should be warned that this doesn't work in any version of Internet Explorer as far as I can see, including 11. Mouse events aren't raised from HTML option elements in IE. – Rich N Oct 20 '18 at 17:01
@RichN That has been the case for a [long time](https://stackoverflow.com/questions/3341740/click-event-for-option-doesnt-work-in-ie). I'll add a note about it in this answer though, thanks. – Rory McCrossan Oct 20 '18 at 17:50

score 1 · Answer 2 · answered May 03 '12 at 12:32

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.

score 1 · Answer 3 · answered May 03 '12 at 12:33

1

Would something like the following help you?

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

answered May 03 '12 at 12:33

Daniel Baulig

10,294
6
43
43

score 0 · Answer 4 · answered Feb 21 '21 at 00:53

0

The real answer:

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

answered Feb 21 '21 at 00:53

Andrew

4,757
1
43
62

Get clicked option in multiple dropdown

4 Answers4

Linked

Related