У меня есть поле, представляющее почтовый индекс пользователя. Когда пользователь покидает это текстовое поле, на сервер отправляется запрос AJAX для получения городов, которые могут быть связаны с этим почтовым индексом.
Я пытаюсь использовать JSON, полученный из этого запроса, для заполнения списка выбора для замены текстового поля, которое в настоящее время предполагается для города (если возвращается один город, я просто изменяю значение текстового поля). *
Например, пользователь вводит 20910 в качестве почтового индекса и возвращает 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>
Любая помощь была бы великолепна. Любые предложения по улучшению этого кода также будут хорошими. Спасибо.