选择使用 JSON 和 jQuery 生成的列表附加空选项答案

【问题标题】：Select List Generated using JSON and jQuery appends empty options选择使用 JSON 和 jQuery 生成的列表附加空选项
【发布时间】：2009-11-16 20:58:04
【问题描述】：

我有一个代表用户邮政编码的字段。当用户离开该文本框时，会向服务器发送一个 AJAX 请求以接收可能与该邮政编码相关联的城市。

我正在尝试使用从该请求收到的 JSON 来填充选择列表，以替换当前假定为城市的文本框（如果返回一个城市，我只需更改文本框的值）。

例如，用户输入 20910 作为他们的邮政编码，它会返回 Silver Spring。我用 Silver Spring 替换了 city 的文本框。另一个用户输入 84107 作为他们的邮政编码，它用盐湖城默里的选择列表替换了文本框。

它可以很好地接收 JSON，但我不确定我的 JavaScript 是否做错了什么。呈现选择时，它会在每个值之后给出空白字段。

这是我的 jQuery：

$('#AddressData_ZipCode').blur(function() {
            var zip = $('#AddressData_ZipCode').val();
            var pattern = /^\d{5}([\-]\d{4})?$/;
            if (zipCode.length > 0 && pattern.test(zip)) {
                $.getJSON("/GeneralInfo/GetCitiesInZip", { zipCode: zip }, function(data) {
                    if (data.length > 1) {
                        var citiesComboBuilder = "<select id='AddressData_City'>";
                        for (var i = 0; i < data.length; i++) {
                            citiesComboBuilder += "<option value='" + data[i] + "'>" + data[i] + "<option/>";
                        }
                        citiesComboBuilder += "</select>";
                        $('#AddressData_City').replaceWith(citiesComboBuilder);
                    }
                    else
                        $('#AddressData_City').val(data);
                });
            }
        });

这是返回的 JSON： [“默里”，“盐湖城”]

这是我在函数运行后收到的 HTML：

<select id="AddressData_City">
 <option value="Murray">Murray</option>
 <option/>
 <option value="Salt Lake City">Salt Lake City</option>
 <option/>
</select>

任何帮助都会很棒。任何改进此代码的建议也会很棒。谢谢。

【问题讨论】：

发布您返回的 json，以便我们看到。
将其添加到原始问题中。

标签： javascript jquery html

【解决方案1】：

这是你的问题：

citiesComboBuilder += "<option value='" + data[i] + "'>" + data[i] + "<option/>";

这是您的解决方案：

citiesComboBuilder += "<option value='" + data[i] + "'>" + data[i] + "</option>";

【讨论】：

哇，不敢相信我没听懂。谢谢。
你可能看起来太努力了。
啊，秒杀我；p

【解决方案2】：

您的 JavaScript 中的选项标签关闭错误，您有 <option/>。看起来浏览器正在尝试纠正它并失败了。

【讨论】：