如何获取当前选定的下拉列表值（选择标记）

Question

edit1：经过进一步调查后，如果我没有使用ajax / getJSON来获取我的列表的值，它实际上是有效的。像下面的东西工作。但是一旦我使用了ajax，即使它只返回3个国家，我也会得到奇怪的行为来获得当前选择的值。

$("#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：似乎与进行ajax调用时的设置async = false有关。它现在正在工作。 （Is it possible to set async:false to $.getJSON call）

我已经在这里和其他地方看到了关于如何解决这个问题的各种讨论，但我的帖子与我在即时创建下拉列表中的选项有所不同。如果我预先创建列表，我不会遇到此问题。

我的问题是getCities，getAgencies和alert函数永远不会得到正确的值。警报功能显示空字符串（即＆＃34;＆＃34;）或空值。但奇怪的是，当它到达displaySearchResults函数时，它获得了正确的值。

getCities，getAgencies和displaySearchResults包含.getJSON函数，该函数传递我提供给函数的值。我正在使用firebug监视/调试这些。

我已经尝试了

• $（＃＆＃34; country：selected＆＃34;）。val（）
• $（＆＃34;＃国家＆＃34）找到（＆＃34;：选择＆＃34）。文本（）
• $（＆＃34;＃国家＆＃34）。文本（）
• 与上面的3相同，但使用.val（）代替。

我的代码：

$(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));
                });
            }
        });
    }

Answer 1

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

Answer 2

尝试使用

进行ittofdirk的回答

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

即。将selected设置为true而不是＆＃34; selected＆＃34;

Answer 3

最好不要使用async=false它会阻止浏览器响应，直到功能完成。在您的情况下，您可以使用jQuery.when。还要记住，这不是你应该实现相对下拉的方式。只需在第一个下拉列表更改时加载第二个下拉列表。所以你不会遇到这个问题