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

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