Я все еще новичок в JQuery, Javascript, но это то, что у меня есть:
Вот мой сценарий:
/* Check for zip code input */
$('#editZipCode').keyup(function() {
var inputString = $('#editZipCode').val();
if(inputString.length == 5) {
$.ajax({
url: base_url+"/zip_code_search/"+inputString,
success: function(data) {
if(data.length > 0) {
var parts = data.split(':');
$('select[name="city"] option').filter(function() { return $(this).text() == parts[0]; }).prop('selected', true);
$('select[name="state"] option').filter(function() { return $(this).text() == parts[1]; }).prop('selected', true);
}else{
$('select[name="city"] option[value="0"]').prop('selected', true);
$('select[name="state"] option[value="0"]').prop('selected', true);
}
}
});
}else{
$('select[name="city"] option[value="0"]').prop('selected', true);
$('select[name="state"] option[value="0"]').prop('selected', true);
}
});
Вот мой html:
<form action="" method="">
<input type="text" id="editZipCode" name="zip_code">
<select id="StateOption" name="state">
<option value="0">-Select-</option>
<option value="AK">AK</option>
<option value="AL">AL</option>
<option value="AR">AR</option>
<option value="AZ">AZ</option>
</select>
<select id="CityOption" name="city">
<option value="0">-Select-</option>
<option value="ADAK">ADAK</option>
<option value="AKIACHAK">AKIACHAK</option>
<option value="AKIAK">AKIAK</option>
</select>
</form>
Проблема заключается в том, что она не будет устанавливать выбранный вариант раскрывающегося списка CityOptions, выпадающее меню StateOptions отлично работает.
Когда я ввожу zip-код, он устанавливает раскрывающееся поле StateOption в том, которое соответствует тому, которое было возвращено из вызова ajax, но не CityOption.
Если я запишу на консоль части [0] или части [1], они оба распечатают город/состояние, которое соответствует почтовому индексу, введенному в поле ввода, но опять же он установит только опцию состояния, соответствующую согласованному значению, а не параметру города,
Я просто пропустил что-то очевидное здесь?
Заранее спасибо!
ps Я использую http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js, если это важно?
Я немного смущен этой строкой:
.filter(function() { return $(this).text() == parts[0]; })
Поскольку я не совсем понимаю ваше намерение с ним. Но я все равно продолжу.
Теперь отчасти трудно полностью отладить ваш код без рабочего примера, но я дам возможное решение, но в основном способ отладки/тестирования того, что вы хотите.
Во-первых, я бы, возможно, изменил строку выше на что-то вроде этого:
$('select[name="city"] option[value="'+ parts[0] +'"]').prop('selected', true);
Но это может быть не критично.
Чтобы проверить, что происходит, вы находитесь на правильном пути с помощью console.log. Если вы используете хром, я бы добавил debugger;
сразу после var parts = data.split(':');
Это заставит ваш код останавливаться здесь, чтобы вы могли провести некоторое тестирование (вам нужно будет открыть инструменты разработчика). На вкладке консоли вы можете протестировать эту точку в своем коде. Таким образом, вы можете набирать parts
и распечатывать свой массив из двух элементов. Эта сила исходит из возможности протестировать в консоли что-то вроде этого:
$('select[name="city"] option[value="'+ parts[0] +'"]')
Это должно возвращать объект опции, если есть совпадение, если вы не получите []
что означает, что jQuery запросил страницу и не смог найти совпадение. Если у него есть соответствие, вы можете попробовать этот код снова, кроме как с помощью prop('selected',true);
в конце, чтобы увидеть, если он работает.
Это, надеюсь, поможет вам в отладке в критической точке и узнать немного больше о том, что делает jQuery. Вы на пути к становлению мастером jQuery!
$('select[name="city"] option');
чтобы увидеть, если он может даже найти варианты города. Если это возможно, то сравните ваши детали [0] со значением в опции, чтобы убедиться, что они идеально совпадают (включая использование заглавных букв). Сделайте небольшие шаги, чтобы проверить ваше здравомыслие и увидеть, где jQuery не может получить то, что вы ожидаете.