选择使用JSON生成的列表,jQuery追加空选项

时间:2009-11-16 20:58:04

标签: javascript jquery html

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

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

例如,用户输入20910作为其邮政编码,并返回Silver Spring。我用Silver Spring替换了城市的文本框。另一个用户输入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>

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

2 个答案:

答案 0 :(得分:1)

这是你的问题:

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

以下是您的解决方案:

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

答案 1 :(得分:0)

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