JQuery фильтр раскрывающийся и установить выбранное не работает

0

Я все еще новичок в 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
html-select

1 ответ

1
Лучший ответ

Я немного смущен этой строкой:

.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!

  • 0
    Я сделал, как вы сказали, и вы по праву распечатали [], если я попытаюсь $ ('select [name = "state"] option [value = "' + parts [1] + '"]'); он печатает [<option value = "IA"> IA </ option>] Что-то странно, что я не нахожу совпадение, когда я знаю, что он существует или, по крайней мере, город указан в раскрывающемся списке, и что части [0] содержит название города. Очень странно! лол, но это полезно.
  • 1
    Что ж, тогда вам нужно продолжать использовать jQuery, чтобы выяснить, почему он не совпадает. Поэтому в точке останова сделайте что-то вроде $('select[name="city"] option'); чтобы увидеть, если он может даже найти варианты города. Если это возможно, то сравните ваши детали [0] со значением в опции, чтобы убедиться, что они идеально совпадают (включая использование заглавных букв). Сделайте небольшие шаги, чтобы проверить ваше здравомыслие и увидеть, где jQuery не может получить то, что вы ожидаете.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню