Using $('#id').val() doesn't return the selected value of a dropdown

Question

I'm trying to find the selected value of a dropdown but I keep getting an empty string or undefined results.

My HTML looks like this:

<div class="input-group" style="padding-bottom: 10px;">
    <span id="add-addon-styling" class="input-group-addon">Status</span>
    <!-- TODO: Make this automatically rather than hardcoded -->
    <select class="form-control required" id="new-activity-modal-status-dropdown">
        <option value="NA" class="selected">N/A</option>
        <option value="ON_TRACK">On Track</option>
        <option value="ISSUE">Issue</option>
        <option value="BEHIND">Behind</option>
    </select>
    <span class="input-group-addon" data-toggle="tooltip" data-placement="top" title="The Status of the Activity. Usually On Track but otherwise set to N/A if unsure.">
        <b>?</b>
    </span>
</div>

And here is the JavaScript:

function OnModalCreateNewActivityBtnClick() {
    var jsonObject = '';
    var modal = $('new-activity-modal-body');
    var activityStatus = modal.find('#new-activity-modal-status-dropdown').val();
    ...
    ...
}

I've also seen this suggested:

function OnModalCreateNewActivityBtnClick() {
    var jsonObject = '';
    var modal = $('new-activity-modal-body');
    var activityStatus = modal.find('#new-activity-modal-status-dropdown').find(":selected").text();
    ...
    ...
}

The first returns an undefined result. The second returns an empty string.

I'm not sure what to do. JavaScript still perplexes me.

use `selector` `#` for `id` here `$('new-activity-modal-body');` — Parth Trivedi, Jan 20 '16 at 12:01
Here is maybe your solution : [StackOverflow jquery-get-selected-option-from-dropdown](http://stackoverflow.com/questions/10659097/jquery-get-selected-option-from-dropdown) — RamenTurismo, Jan 20 '16 at 12:02
Whoever put a minus on the post, would you mind explaining why, so I can avoid it in the future? — OmniOwl, Jan 20 '16 at 12:13

ekuusela · Accepted Answer · 2016-01-20T12:03:21.677

2

var modal = $('new-activity-modal-body');

Should probably be

var modal = $('#new-activity-modal-body');

You get no errors, since jquery selectors finding nothing is a valid situtation.

edited Jan 20 '16 at 12:03

answered Jan 20 '16 at 12:01

ekuusela

4,864
1
23
42

Yep that was it. Thanks! – OmniOwl Jan 20 '16 at 12:03

score 1 · Answer 2 · answered Jan 20 '16 at 12:03

Assuming the HTML is :

<div class="new-activity-modal-body">...</div>

The following code will not work because you don't specify if new-activity-modal-body is a class or id :

var modal = $('new-activity-modal-body');

Should be :

var modal = $('#new-activity-modal-body'); //id selector
//OR
var modal = $('.new-activity-modal-body'); //class selector

Hope this helps.

score 1 · Answer 3 · answered Jan 20 '16 at 12:04

1

Use

var modal = $('#new-activity-modal-body');

answered Jan 20 '16 at 12:04

lradacher

450
4
6

score 1 · Answer 4 · answered Jan 20 '16 at 12:07

1

Your variable modal is not assigned properly. There is no new-activity-modal-body. You should use #new-activity-modal-body.

Just replace

var modal = $('new-activity-modal-body');

With

var modal = $('#new-activity-modal-body');

answered Jan 20 '16 at 12:07

Ali Zia

3,687
3
24
68

Using $('#id').val() doesn't return the selected value of a dropdown

4 Answers4