Как установить значение для выбора поля с помощью jquery?

Question

У меня есть поле выбора, заполненное getJson. Мне нужно выбрать опцию по значению какого-то скрытого элемента:

  var dropdown = jQuery('#sport');

  var sport = jQuery('#sport_id').val();

  // Populate dropdown with sports
  jQuery.getJSON("/races/index/sportsjson", function (data) {
      jQuery.each(data, function (key, entry) {
        var selected = false;
        if (entry.key == sport) {
          selected = true;        
        }
        dropdown.append(jQuery('<option></option>').attr('selected', selected).attr('value', entry.key).text(entry.value));
      })      
  });             
  jQuery('#sport').val(sport);

Выбранная опция верна в поле выбора, но затем я хочу использовать значение выбранной опции для другой функции, но если я предупреждаюэто jQuery('#sport').val(), оно пустое. Но alert(sport) возвращает значение правильно. В чем проблема? Я вызываю следующую функцию после строки jQuery('#sport').val(sport);

Answer 1

Вы должны переместить весь свой код в метод getJSON (), чтобы он выполнялся после того, как данные были возвращены.

var dropdown = jQuery('#sport');
var sport = jQuery('#sport_id').val();

// Populate dropdown with sports
jQuery.getJSON("/races/index/sportsjson", function (data) {
    jQuery.each(data, function (key, entry) {
      var selected = false;
      if (entry.key == sport) {
        selected = true;        
      }
      dropdown.append(jQuery('<option></option>').attr('selected', selected).attr('value', entry.key).text(entry.value));
    });

    jQuery('#sport').val(sport);//this line is unnecessary because you have already set the selected value above      

    alert(jQuery('#sport').val());
    //Call your xyz() function here.
});

Answer 2

Ajax-вызовы по своей природе асинхронны, и способ передачи данных после загрузки с помощью ajax-вызова (точно так же, как в jquery getJSON) заключается в создании цепочки метода .done () после вашего ajax-вызова. Внутри .done () укажите, что вы хотели бы делать со своими извлеченными данными. Читайте больше на тему официальной документации jquery, что довольно просто, я должен добавить. https://api.jquery.com/jQuery.getJSON/