jquery - 在页面加载和更改时使用 AJAX 填充 SELECT 元素

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))

然后简单地在“加载”初始化 block 的底部调用它:

populate();

虽然这有效，但感觉不太对劲。谁能提出更好的解决方案？

Answer 1

您可以通过将 .trigger('change') 添加到选择器来触发更改事件，如下所示:

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