Заполнение 2-го поля выбора - проблема привязки

Question

Я использую следующий код для заполнения второго поля выбора городами:

  jQuery('#country').live("change", function(){ 
    populateCityListBox();
    alert(jQuery("select#city").val());
  }); 

- - - -  - - - - - - - - - - -

  function populateCityListBox()
  {

    jQuery.get("my/path/myfile.php", { instance: 'getCitiesByCountry', countryID: jQuery("select#country").val(), brandID: $_GET('brandID') },
      function(data)
      {
          var options = '';
          for (var i = 0; i < data.length; i++) {
            if (i == 0)
              options += '<option selected value="' + data[i].city + '">' + data[i].city + '</option>';
            else
              options += '<option value="' + data[i].city + '">' + data[i].city + '</option>';

          }

          jQuery("select#city").append(options);
      },"json");
  }

Заполнение списка работает нормально. Но предупреждение не выводит новый город (после выбора страны). Может ли это быть обязательной проблемой? Я думал, что использование $ .live решило все это.

Похоже, что оповещение () срабатывает до обновления списка городов. Что я делаю не так?

Answer 1

Стивен, вы совершенно правы. Код:

alert(jQuery("select#city").val());

выполняется до того, как ваш запрос get () вернулся с ответом с сервера. Функция обратного вызова, которую вы определили для заполнения списка городов, не будет запущена, пока не будет получен ответ.

Попробуйте создать другую функцию для отображения вашего оповещения и вызовите ее из обратного вызова get:

  jQuery('#country').live("change", function(){ 
    populateCityListBox();
  }); 

function showCity()
{
    alert(jQuery("select#city").val());
}

- - - -  - - - - - - - - - - -

  function populateCityListBox()
  {

    jQuery.get("my/path/myfile.php", { instance: 'getCitiesByCountry', countryID: jQuery("select#country").val(), brandID: $_GET('brandID') },
      function(data)
      {
          var options = '';
          for (var i = 0; i < data.length; i++) {
            if (i == 0)
              options += '<option selected value="' + data[i].city + '">' + data[i].city + '</option>';
            else
              options += '<option value="' + data[i].city + '">' + data[i].city + '</option>';

          }

          jQuery("select#city").append(options);
          showCity();
      },"json");
  }

Answer 2

этот кусок кода был очень полезен для меня. Единственная модификация, которую я сделал, заключалась в добавлении .empty перед добавлением, например:

function populateCityListBox()
 {

  jQuery("select#city").empty();
 ....

В противном случае, если вы измените выбор, новые значения будут добавлены к существующим значениям.

Answer 3

Вы используете вызов AJAX для заполнения списка городов. Если вы не изменили значение по умолчанию, вызов является асинхронным; следовательно, нет гарантии, что он завершится до вызова alert ().

Лучше вызывать alert () в обратном вызове при успешном завершении, который вы передаете get () в качестве третьего аргумента:

jQuery.get(your_url, your_data, function() {alert('...');})