jQuery每个循环一次

<script type="text/javascript">
    $(document).ready(function () {
        var country = ["United States", "Canada", "Australia", "United Kingdom"];
        var state = {
            "United States": "Alaska",
            "United States" : "Alabama"
        };
        $(this).click(function () {
            if ($.inArray($(this).val(), country)) {
                $.each(state, function (key, val) {
                    if ($("#country").val() == key) {
                        $("#state").append("<option value=" + val + ">" + val + "</option>");
                    }
                });
            }
        });
    });
</script>

基本上我想做的是，对“国家/地区”有一个多重选择项，我想根据用户对“国家/地区”的点击次数填充“#state”，现在它仅在下面显示第一项“阿拉斯加”多重选择。

不完全确定我在做什么错。

最佳答案

您不能执行以下操作:

var state = {
    "United States" : "Alaska",
    "United States" : "Alabama"
};

对象中的键必须是唯一的。您的第二个"United States" key 将覆盖第一个"United States" key ，从而使您的对象变为:

var state = {
    "United States" : "Alabama"
};

相反，您需要存储一个对象，该对象将国家/地区映射到州:

var state = {
    "United States" : ["Alaska", "Alabama"],
    "United Kingdom" : ["Scotland", "England"] // "states" in the UK?
};

...，然后相应地更改您的点击处理程序:

$(this).click(function () {
    if ($.inArray($(this).val(), country)) {
        $.each(state, function (key, val) {
            if ($("#country").val() == key) {
                $.each(val, function (i, name) {
                    $("#state").append("<option value=" + name + ">" + name + "</option>");
                });
            }
        });
    }
});

注意:

您的$(this).click()选择器可能错误。它可能应该是ID或类选择器(例如$('#your_id')，$('.your-class'))。

您可能需要先清空选择的$('#state')，然后再附加到它。为此，请在点击处理程序内(但在循环外部)添加$(this).children().remove()。

我不确定为什么要保留国家名称数组，以及将国家名称映射到州的对象；删除country，只需使用state的键即可获取您的国家/地区。

请记住，多重选择的$().val()返回结果数组，而不是单个值。

考虑到所有这些注意事项，并且有些杂项。整理一下，这是我想出的代码:

$(document).ready(function () {
    var countries = {
        "United States": ["Alaska", "Alabama"],
        "United Kingdom": ["Scotland", "England"] // "states" in the UK?
    };

    // SETUP: Ignore this bit.
    Object.keys(countries).forEach(function (val) {
       $('#multiselect').append('<option value="' + val + '">' + val + '</option>');
    });
    // END SETUP.

    $('#multiselect').change(function () {
        var vals = $(this).val();
        var states = $('#state');

        states.children().remove();

        jQuery.each(vals, function (i, name) {
            var country = countries[name];

            jQuery.each(country, function (i, val) {
                states.append('<option value="' + val + '">' + val + '</option>');
            });
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select multiple="multiple" id="multiselect"></select>
<select multiple="multiple" id="state"></select>

看到它在这里工作:http://jsfiddle.net/6dnbgf24/1/

关于jQuery每个循环一次，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27522002/