Question

我在从JSON对象创建2个选择输入时在下拉列表中获得空白选项。我的代码如下：

<form>
    <div class="form-group">
        <label for="countries">Countries: </label>
        <select class="select2" id="countries" name="countries" multiple="multiple" style="width: 50%">
            <option></option>
        </select>
    </div>
    <div class="form-group">
        <label for="cities">Cities: </label>
        <select class="select2" id="cities" name="cities" multiple="multiple" style="width: 50%">
        </select>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

var selectData = [{
    "id": "1",
    "name": "United States",
    "city": [{
        "country_id": "1",
        "id": "1",
        "name": "New York City"
    }, {
        "country_id": "1",
        "id": "2",
        "name": "Los Angeles"
    }, {
        "country_id": "1",
        "id": "3",
        "name": "Chicago"
    }, {
        "country_id": "1",
        "id": "4",
        "name": "Hustan"
    }]
}, {
    "id": "2",
    "name": "India",
    "city": [{
        "country_id": "2",
        "id": "5",
        "name": "Mumbai"
    }, {
        "country_id": "2",
        "id": "6",
        "name": "Delhi"
    }, {
        "country_id": "2",
        "id": "7",
        "name": "Bangalore"
    }, {
        "country_id": "2",
        "id": "8",
        "name": "Chennai"
    }]
}, {
    "id": "3",
    "name": "China",
    "city": [{
        "country_id": "3",
        "id": "9",
        "name": "Guangzhou"
    }, {
        "country_id": "3",
        "id": "10",
        "name": "Shanghai"
    }, {
        "country_id": "3",
        "id": "11",
        "name": "Chongqing"
    }, {
        "country_id": "3",
        "id": "12",
        "name": "Beijing"
    }]
}];

$("document").ready(function() {
    function getCountryId() {
        return $("#countries").val();
    }

    var $select1 = $("#countries"),
        $select2 = $("#cities");

    var countries = '<option value="0">All<option/>';
    $.each(selectData, function(i, country) {
        countries += '<option value="' + country.id + '">' + country.name + '<option/>';
    });
    $select1.html(countries);

    function createCities(id = null) {
        if (!id || id == 0) {
            var cities = '<option value="0">All<option/>';
            $.each(selectData, function(i, country) {
                $.each(country.city, function(i, city) {
                    cities += '<option value="' + city.id + '">' + city.name + '<option/>';
                });
            });
            $select2.html(cities);
        } else {
            var cities = '<option value="0">All<option/>';
            if ($.isArray(id)) {
                $.each(id, function(i, id) {
                    $.each(selectData, function(i, country) {
                        if (country.id === id) {
                            $.each(country.city, function(i, city) {
                                cities += '<option value="' + city.id + '">' + city.name + '<option/>';
                            });
                        }
                    });
                })
            } else {
                $.each(selectData, function(i, country) {
                    if (country.id === id) {
                        $.each(country.city, function(i, city) {
                            cities += '<option value="' + city.id + '">' + city.name + '<option/>';
                        });
                    }
                });
            }
            $select2.html(cities);
        }
    }

    createCities();

    $select1.on('change', function() {
        var id = getCountryId();
        createCities(id);
    });

    $(".select2").select2();
});

代码演示： https://jsfiddle.net/vee4c1op/

Answer 1

您的问题是因为您生成的HTML无效。您应该在option时添加<option />个结尾</option>元素，然后渲染器会添加一个新的空白option元素，因为它不确定你正在尝试做什么。

例如，这个：

var countries = '<option value="0">All<option/>';

应该是：

var countries = '<option value="0">All</option>';

如果您修复HTML以正确关闭</option>，那么您的代码就可以运行。

Update fiddle

Answer 2

我刚修改了你的脚本和HTML代码。这是修改后的代码。我希望它会对你有所帮助。

 var selectData = [{
        "id": "1",
        "name": "United States",
        "city": [{
            "country_id": "1",
            "id": "1",
            "name": "New York City"
        }, {
            "country_id": "1",
            "id": "2",
            "name": "Los Angeles"
        }, {
            "country_id": "1",
            "id": "3",
            "name": "Chicago"
        }, {
            "country_id": "1",
            "id": "4",
            "name": "Hustan"
        }]
    }, {
        "id": "2",
        "name": "India",
        "city": [{
            "country_id": "2",
            "id": "5",
            "name": "Mumbai"
        }, {
            "country_id": "2",
            "id": "6",
            "name": "Delhi"
        }, {
            "country_id": "2",
            "id": "7",
            "name": "Bangalore"
        }, {
            "country_id": "2",
            "id": "8",
            "name": "Chennai"
        }]
    }, {
        "id": "3",
        "name": "China",
        "city": [{
            "country_id": "3",
            "id": "9",
            "name": "Guangzhou"
        }, {
            "country_id": "3",
            "id": "10",
            "name": "Shanghai"
        }, {
            "country_id": "3",
            "id": "11",
            "name": "Chongqing"
        }, {
            "country_id": "3",
            "id": "12",
            "name": "Beijing"
        }]
    }];

    $("document").ready(function () {           
        getCountryId();
        var $select1 = $("#countries"),
            $select2 = $("#cities");

        var countries = '<option value="0">All</option>';
        $.each(selectData, function (i, country) {
            countries += '<option value="' + country.id + '">' + country.name + '</option>';
        });
        $select1.html(countries);

        $('.select1').change(function () {
            var id = getCountryId();
            createCities(id);
        });

        //createCities(0);           

        //$(".select2").select2();
    });

    function createCities(id) {
        if (!id || id == 0) {
            var cities = '<option value="0">All</option>';
            $.each(selectData, function (i, country) {
                $.each(country.city, function (i, city) {
                    cities += '<option value="' + city.id + '">' + city.name + '</option>';
                });
            });
            $('#cities').html(cities);
        } else {
            var cities = '<option value="0">All</option>';
            if (id!=null) {
                $.each(id, function (i, id) {
                    $.each(selectData, function (i, country) {
                        if (country.id === id) {
                            $.each(country.city, function (i, city) {
                                cities += '<option value="' + city.id + '">' + city.name + '</option>';
                            });
                        }
                    });
                })
            } else {
                $.each(selectData, function (i, country) {
                    if (country.id === id) {
                        $.each(country.city, function (i, city) {
                            cities += '<option value="' + city.id + '">' + city.name + '</option>';
                        });
                    }
                });
            }
            $('#cities').html(cities);
        }
    }

    function getCountryId() {
        //alert($("#countries").val());
        return $("#countries").val();
    }

以下是修改后的HTML代码。

<form>
    <div class="form-group">
        <label for="countries">Countries: </label>
        <select class="select1" id="countries" name="countries" multiple="multiple" style="width: 50%">
            <option></option>
        </select>
    </div>
    <div class="form-group">
        <label for="cities">Cities: </label>
        <select class="select2" id="cities" name="cities" multiple="multiple" style="width: 50%">
        </select>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

从JSON构建下拉列表，获取空白选项

2 个答案: