Question

我在表单中有一个SELECT元素，当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调用执行此操作可能会引入一个间隔，页面出现但选择框仍为空。当页面来自缓存时，很容易发生这种情况。用户会感到困惑，可能需要再次尝试才能看到出现的选择。

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

2 个答案: