当使用Ajax时，清除select2下拉菜单的正确方法是什么？工作中的Fiddle - 本地数据源

Question

我有一个问题 选择2 当我输入一个项目后，我想再次使用相同的下拉菜单，我似乎无法删除之前选择的项目。

例如，假设我的id是 "#StreamName"，我想这样做可以清除它。

 $("#StreamName").val(null).trigger("change");

但它似乎仍然显示出之前选择的项目。 从看html来看，似乎我是用蛮力来做的。

$("#select2-StreamName-container").html("");

但这似乎是我没有正确使用API，所以我想看看是否有其他建议，或者我是否遗漏了什么。

Answer 1

工作中的Fiddle - 本地数据源

看来，清除Select2的正确方法是你最初建议的那样。本回答 建议。

Javascript

$(document).ready(function() {
  $("#StreamName").select2();
  $("#StreamName").val(null).trigger("change");
});

超文本标记语言

<select id="StreamName">
  <option value="AL">Alabama</option>
  <option value="CA">California</option>
  <option value="WY">Wyoming</option>
</select>

更新-远程数据源

JSFiddle使用远程数据

即使在使用远程数据源的情况下，这个功能也应该可以清除Select2输入。

$("#StreamName").val(null).trigger("change");

完整的Javascript

$(document).ready(function() {
  $("#StreamName").select2({
    ajax: {
      url: "https://api.github.com/search/repositories",
      dataType: 'json',
      delay: 250,
      data: function(params) {
        return {
          q: params.term, // search term
          page: params.page
        };
      },
      processResults: function(data, params) {
        // parse the results into the format expected by Select2
        // since we are using custom formatting functions we do not need to
        // alter the remote JSON data, except to indicate that infinite
        // scrolling can be used
        params.page = params.page || 1;

        return {
          results: data.items,
          pagination: {
            more: (params.page * 30) < data.total_count
          }
        };
      },
      cache: true
    },
    escapeMarkup: function(markup) {
      return markup;
    }, // let our custom formatter work
    minimumInputLength: 1,
    templateResult: formatRepo, // omitted for brevity, see the source of this page
    templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
  });


  $("#StreamName").val(null).trigger("change");

  // For testing...
  $('#set-null').click(function() {
    $("#StreamName").val(null).trigger("change");
  });



});


function formatRepo(repo) {
  if (repo.loading) return repo.text;

  var markup = "<div class='select2-result-repository clearfix'>" +
    "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
    "<div class='select2-result-repository__meta'>" +
    "<div class='select2-result-repository__title'>" + repo.full_name + "</div>";

  if (repo.description) {
    markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
  }

  markup += "<div class='select2-result-repository__statistics'>" +
    "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +
    "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
    "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
    "</div>" +
    "</div></div>";

  return markup;
}

function formatRepoSelection(repo) {
  return repo.full_name || repo.text;
}

超文本标记语言

<select id="StreamName">
  <option value="3620194" selected="selected">select2/select2</option>
</select>