第一次未调用多选中的 for 循环 javascript/jquery

Question

我有一个 multiselect 依赖项，我在其中分别显示城市及其区域。问题是，函数 getArea 中的两个 for 循环仅在 cities 选项元素的第二个 select 上被调用。

注意：在调试器中它工作正常。我认为这是一个范围问题，我尝试使用 foreach 函数但无济于事。

我已在出现问题的行下方指出。

        //Global Variables

        var allAreas = new Array();

        $(document).ready(function() {
            getCities();
            $("#sel-city").bind("change", getAreas);

        });


        //get Cities on reload
        function getCities() {


            $.getJSON("cities.json", function(json) {

                var citySelect = $("#sel-city");

                for (var i in json) {
                    $("#sel-city")
                            .append($('<option>', {value: json[i].id})
                                    .text(json[i].name));
                }

            });
        }

        function getAreas() {

            var parentID = $(this).val();
            console.log(parentID);


            if (allAreas.length == 0) {
                $.getJSON("areas.json", function(json) {

                    for (var i in json) {
                        allAreas.push(json[i]);
                    }


                });
            }


            $('option', $("#sel-area")).remove();
            var areasByParentID = new Array();
//Loop here            
            for (var i in allAreas) {

            if (allAreas[i].city_id == parentID) {
                    areasByParentID.push(allAreas[i]);
                }
            }

            console.log(areasByParentID);

//Loop here
            for (var k in areasByParentID) {

                $("#sel-area")
                        .append($('<option>', {value: areasByParentID[k].id})
                                .text(areasByParentID[k].name));

            }

        }

Answer 1

根据您提供给我们的信息，如果没有示例数据，一切看起来都很好。但是你有一些小错误可能会导致不好的结果。我决定看一下它，进行一些更正并让它与一些示例数据一起正常工作。

你应该注意什么？

对数组使用 for 循环而不是 for-in
你应该避免 new Array() 操作
您应该缓存 jquery 变量以减少站点负载
要在站点加载上正确设置区域，您应该只定义初始化函数

这里会出现什么错误？

var a = [];
a[5] = 5;
for (var x in a) {
    // Shows only the explicitly set index of "5", and ignores 0-4
}

for-in语句的用途是遍历对象属性，甚至会继承属性。根据您的数据，它可能会给出错误的结果，如我的示例所示。

这里是 jsfiddle 示例数据。

第一次未调用多选中的 for 循环 javascript/jquery

for loop in multiselect not called first time javascript/jquery

javascript

foreach

jquery

scope

multi-select