How do I get the currently selected value of dropdown (select tag)

Question

edit1: after further investigation, if I don't use ajax/getJSON to get the value for my list, it actually works. something like below works. but once I use ajax even if it's only returning 3 countries, I get weird behavior getting the currently selected value.

$("#country").append($('<option></option>').attr("value", "Argentina").text("Argentina"));
$("#country").append($('<option></option>').attr("value", "Australia").text("Australia"));
$("#country").append($('<option></option>').attr("value", "Bangladesh").attr("selected", "selected").text("Bangladesh"));
$("#country").append($('<option></option>').attr("value", "China").text("China"));

edit2: seems this has something to do with settings async = false when making the ajax call. It's working now. (Is it possible to set async:false to $.getJSON call)

I've seen various discussion here and elsewhere on how to go about this but my post is different where I am creating the options in the dropdown list on-the-fly. I do not encounter this problem if I precreate the list.

My problem is that the getCities, getAgencies and the alert functions never gets the correct value. The alert function either displays an empty string (i.e. "") or the null value. But the weird thing is when it reaches the displaySearchResults function it is getting the right value.

getCities, getAgencies and displaySearchResults contains .getJSON function which passes the values I supplied to the functions. I am monitoring/debugging these using firebug.

I've tried

$(#"country :selected").val()
$("#country").find(":selected").text()
$("#country").text()
same as the 3 above but using .val() instead.

my code:

$(document).ready(function(){
    onLoad();

    function onLoad() {
        getCountries("Australia");
        getCities($("#country").find(":selected").val());
        getAgencies($("#country").find(":selected").val(), null);

        alert($("#country").find(":selected").text());
        displaySearchResults($("#country").find(":selected").val(), null, null);
    }

    function getCountries(country) {
        $.getJSON("index.html/agents/getCountries?format=json", {}, function(data, status) {
            if (data.length > 0) {
                $("#country").empty();

                $.each(data, function () {
                    if (this.COUNTRY != country) {
                        $("#country").append($('<option></option>').attr("value", this.COUNTRY).text(this.COUNTRY));
                    } else {
                        $("#country").append($('<option></option>').attr("value", this.COUNTRY).attr("selected", "selected").text(this.COUNTRY))
                    }
                });
            }       
        });
    }

    function getCities(country) {
        $.getJSON("index.html/agents/getCities?format=json", {country:country}, function(data, status) {
            if (data.length > 0) {
                $("#city").empty();

                $("#city").prepend($('<option></option>').attr("value", "").attr("selected", "selected").text("- Choose a city -"));
                $.each(data, function () {
                    $("#city").append($('<option></option>').attr("value", this.CITY).text(this.CITY));
                });
            }
        });
    }

possible duplicate of [JQuery: get SELECT's value and text](http://stackoverflow.com/questions/12614308/jquery-get-selects-value-and-text) — Yaje, Aug 20 '14 at 02:19
if you've read my post, you can see that I've tried all the suggestions mentioned in those topics. I've seen many more but talks about similar solutions. The difference with theirs and mine is that I'm creating the dropdown on-the-fly. — mrjayviper, Aug 20 '14 at 02:45

score 0 · Answer 1 · answered Aug 20 '14 at 02:30

0

$("#MySelect option").each(function(){
    if($(this).prop("selected") == true){
        //we've found the selected option tag so do stuff with it
    }
});

answered Aug 20 '14 at 02:30

Andrew Roth

1,063
10
18

doesn't work for dropdown list created on the fly like my example. It does work for a static/precreated list. thanks though :) – mrjayviper Aug 20 '14 at 03:38

score 0 · Answer 2 · answered Aug 20 '14 at 04:35

0

Try ittofdirk's answer with

$("#country").append($('<option></option>').attr("value", this.COUNTRY).attr("selected", "true").text(this.COUNTRY))

i.e. set selected to true instead of "selected"

answered Aug 20 '14 at 04:35

artm

8,554
3
26
43

score 0 · Accepted Answer · answered Aug 20 '14 at 05:14

Better not use async=false it will stop your browser responding till the function complete. In your case you can use jQuery.when. And also remember that this is not the way you should implement the relative dropdowns. just load the second dropdown when first one is changed. so you wont get this issue

How do I get the currently selected value of dropdown (select tag)

edit2: seems this has something to do with settings async = false when making the ajax call. It's working now. (Is it possible to set async:false to $.getJSON call)

3 Answers3