How can I determine what option is selected on a dropdown?

Question

I have a dropdown menu of values:

            <select class="notifications-dropdown">
                <option value="val1">Val4</option>
                <option value="val2">Val3</option>
                <option value="val3">Val2</option>
                <option value="val4">Val1</option>
            </select>

I want to make it so when a user selects one of the options from the dropdown, that option has a 'selected' attribute toggled on. For example, if a user clicks the dropdown and selects Val3 then the DOM should change as follows:

            <select class="notifications-dropdown">
                <option value="val1">Val4</option>
                <option value="val2" selected>Val3</option>
                <option value="val3">Val2</option>
                <option value="val4">Val1</option>
            </select>

I am not sure what jQuery event to listen for to know when a user selects an option though. I tried listening for a change event on the .notifications-dropdown but the generated event object does not give me any indication about which option was selected. How can I determine what option is selected on a dropdown?

Have you tried `$(this).val()` in `change` event? – Satpal Aug 03 '15 at 18:04 — Satpal, Aug 03 '15 at 18:04
Your options values and text don't match, just saying... – A. Wolff Aug 03 '15 at 18:05 — A. Wolff, Aug 03 '15 at 18:05

score 4 · Answer 1 · answered Aug 03 '15 at 18:04

4

Just use .val() on your select list.

$('.notifications-dropdown').change(function() {
    alert($(this).val());
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="notifications-dropdown">
    <option value="val1">Val4</option>
    <option value="val2">Val3</option>
    <option value="val3">Val2</option>
    <option value="val4">Val1</option>
</select>

this when used inside of a jQuery callback is the element which the event occurred on.

answered Aug 03 '15 at 18:04

vcsjones

138,677
31
291
286

Can I achieve this same effect without referring to the this identifer? My framework overrides the this binding in the jQuery callback. – chopper draw lion4 Aug 03 '15 at 18:13
@chopperdrawlion4: How is that possible? jQuery provides the `this` value to the handler; are you intercepting it? Why would you override `this`? That seems incredibly confusing and frankly is just a bad idea. – Cᴏʀʏ Aug 03 '15 at 18:51

score 1 · Answer 2 · answered Aug 03 '15 at 18:04

You were on the right track:

// on Dom-ready
$(function() {
    // bind the 'change' event
    $('.notifications-dropdown').change(function() {
        // $(this).val() will have the selected value
        alert($(this).val());
    }).change(); // fire it once on page-load if you need to do anything based on the current value
});

The user's action of selecting a new option will modify the DOM element's selected attribute -- you don't need to do that programmatically.

score 1 · Answer 3 · answered Aug 03 '15 at 18:04

1

Use below code on a jquery change event. Assume, select tag has id="selectId"

To Read Select Option Value

$('#selectId').val();

To Set Select Option Value

$('#selectId').val('newValue');

To Read Selected Text

$('#selectId>option:selected').text();

answered Aug 03 '15 at 18:04

Shreeram K

1,719
13
22

score 1 · Answer 4 · answered Aug 03 '15 at 18:05

Use .val() method

Get the current value of the first element in the set of matched elements or set the value of every matched element.

The .val() method is primarily used to get the values of form elements such as input, select and textarea.

$('.notifications-dropdown').change(function() {
     alert($(this).val());
});

Kenneth Salomon · Accepted Answer · 2015-08-03T18:18:08.697

You seem to be on the right track with the change event. But that is the thing, the change event just tells you that the field/option selected has changed, it, and any other event listener, will not provide a value.

To get the value, you will need to reference jQuery like so:

$('.notifications-dropdown option:selected').text();

or to get the value of the option selected, you can reference it like so:

$('.notifications-dropdown option:selected').val();

How can I determine what option is selected on a dropdown?

5 Answers5