Заполнение элемента SELECT с использованием AJAX при загрузке страницы и при изменении

Question

У меня есть элемент SELECT в форме, который я заполняю, используя AJAX, когда изменяется опция выбора. Это работает очень хорошо, используя следующий код:

$(function() {
  function populate() {
    $.getJSON('/action/' + $(this).val(), {}, function(data, textStatus) {
      var el = $('select#two');
      el.html('');  // empty the select
      $.each(data, function(idx, jsonData) {
        el.append($('<option></option>').val(jsonData.id).html(jsonData.name));
      });
    });
  }

  $("select#one").change(populate);
});

Конечно, это работает только при первом изменении первого раскрывающегося списка. То, что я хотел бы сделать, это использовать тот же метод для предварительного заполнения второго раскрывающегося списка, когда страница загружается впервые.

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

$.getJSON('/action/' + $("select#one").val(), {}, function(data, textStatus) 

(т.е. не использовать $(this))

, а затем просто вызвать его в нижней части блока инициализации 'on load':

populate();

Хотя это работает, оно просто не кажется правильным. Кто-нибудь может предложить лучшее решение?

Answer 1

Вы можете вызвать событие изменения, добавив .trigger('change') к вашему селектору следующим образом:

$("select#one").change(populate).trigger('change');

Answer 2

По моему мнению, лучше заполнить первый выбор, используя код на стороне сервера. Выполнение этого с помощью вызова Ajax может привести к появлению интервала, когда страница появляется, но поле выбора остается пустым. Это может легко произойти, когда страница поступает из кэша. Пользователь может запутаться и, возможно, потребуется еще раз попробовать, чтобы увидеть выбор.