CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
Frets
Frets

Reputation: 147

Get clicked option in multiple dropdown

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.

Upvotes: 10

Views: 25358

Answers (4)

Andrew
Andrew

Reputation: 1

The real answer:

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

Upvotes: -1

Rory McCrossan
Rory McCrossan

Reputation: 337610

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.

Upvotes: 9

Daniel Baulig
Daniel Baulig

Reputation: 10999

Would something like the following help you?

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

Upvotes: 1

sv_in
sv_in

Reputation: 14049

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.

Upvotes: 1

Related Questions