当Select2 4.0.1小部件打开时,如何选择选项?

时间:2016-03-03 23:30:06

标签: javascript jquery jquery-select2 jquery-select2-4 select2

我目前有一个功能正常的小部件,它接受多个选项。小部件位于弹出窗口内,其中包含" Save"按钮和其他按钮。当我点击" Save"时,弹出窗口关闭,将选择保存到数据库中,自动运行数据库中的查询,并在DataView中显示结果。

现在,当我再次打开弹出窗口时,Select2小部件中的文本字段为空。我希望它能够获取数据库中的数据,并在打开时在窗口小部件中显示它们。我设置它,以便它返回一个字符串数组,它应该是ID(这是我需要的小部件来检索正确的数据)。

所以我的问题是:如何修改窗口小部件以便它可以接收数组并在创建窗口小部件时将它们显示为已选择的选项?

我实际上不太清楚在这种情况下我的代码会显示什么,但为了以防万一,这里是:

$("#select2").select2({
  placeholder: "Select materials...",
  closeOnSelect: false,
  ajax: {
    url: this.targetUrl,
    delay: 200,
    dataType: 'json',
    data: function(params) {
      return {
        code: params.term ? params.term + "*" : "*",
        page: params.page || 1
      };
    },
    processResults: function(data, params) {
      params.page = params.page || 1;
      var results = [];
      for (var i = 0; i < (data.length >= 25 ? 25 : data.length); i++) {
        results.push({
          id: data[i].code,
          text: data[i].code
        });
      }
      return {
        itemCode: results,
        results: results,
        pagination: false
      };
    },
    cache: true
  },
  maximumSelectionLength: 5,
  escapeMarkup: function(markup) {
    return markup;
  }
});

1 个答案:

答案 0 :(得分:0)

当使用组件执行不同操作时,Select2将触发几个不同的事件,允许您添加自定义挂钩并执行操作。 例如:&#34;更改&#34; event,选择或删除选项时触发。

所以你可以使用

$("#select2").val($selected).trigger("change");

在你的问题代码之后,以编程方式控制你的select2。

选择上面的

是您从服务器端请求的数据。它应该是一个数组,如[&#34; 12&#34;,&#34; 23&#34;,&#34; 34&#34;]。

希望能帮到你。

参考select2