我有一个代表用户邮政编码的字段。当用户离开该文本框时,会向服务器发送一个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>
任何帮助都会很棒。任何改进此代码的建议都会很棒。感谢。
答案 0 :(得分:1)
这是你的问题:
citiesComboBuilder += "<option value='" + data[i] + "'>" + data[i] + "<option/>";
以下是您的解决方案:
citiesComboBuilder += "<option value='" + data[i] + "'>" + data[i] + "</option>";
答案 1 :(得分:0)
您的JavaScript中的选项标记关闭错误,您有<option/>
。看起来浏览器正在尝试纠正它并失败。