1

我再次进行 3.5 -> 4.0 升级，并且“几乎”让这个用例像以前一样工作。我现在坚持的是如何始终将某个选项添加到 ajax 结果列表中。

这是我现在拥有的：

html:

<select id="vedit-filter" name="settings[filter]" class="form-control select2">
    <option value="default" selected="">default</option>
</select>

js：

$("#vedit-filter").select2({
    placeholder: "Select or enter application...",
    allowClear: true,
    multiple: false,
    tags: true,
    ajax: {
        dataType: 'json',
        delay: 1000,
        type: 'post',
        url: '/process/get_application_list.php',
        data: function (term, page) {
            return {
                term: term, // search term
                page_limit: 25, // page size
                page: page // page number
            };
        },
        results: function (data, page) {
            var more = (page * 25) < data.total; // whether or not there are more results available
            return {
                results: data.results,
                more: more
            };
        }
    }
});

这将加载“默认”作为初始选择的选项。如果用户改变了这个，那么它就消失了。如果需要，我想要一种方法让他们恢复到最初的选择。将它作为选项包含在我从 ajax 返回的结果中的唯一方法是什么？或者有没有办法在js端做到这一点？

更新：

默认选择将始终是动态的，但在此示例中，我们使用的值/名称为“默认”。

<select id="vedit-filter" name="settings[filter]" class="form-control select2">
    <option value="default" selected="">default</option>
</select>

然后在js中：

var default_filter = $("#vedit-filter").val(); //get the default loaded from the html

placeholder: {
  id: default_filter, // or whatever the placeholder value is
  text: default_filter // the text to display as the placeholder
},
4

1 回答 1

1

我最近在 GitHub 上解释了这一点，但没有意识到它有多大的突破性变化。

如果需要，我想要一种方法让他们恢复到最初的选择。

Select2 提供了placeholder选项，如果尚未进行选择，则可以允许您为用户指定一个占位符，例如“选择一个项目”。为了支持 a <select>，默认情况下将选择第一个选项（由浏览器完成）， Select2 要求<option>存在“占位符”。这也兼作 Select2 用来确定是否需要显示占位符的选项。

除了placeholder选项之外，Select2 还允许用户删除他们选择的选项，这会将选择恢复为占位符选项。这可以通过allowClear选项启用。

将它作为选项包含在我从 ajax 返回的结果中的唯一方法是什么？或者有没有办法在js端做到这一点？

在您的示例中，您正在使用带有value集合的占位符选项。因为 Select2 预计value默认情况下为空白/空，所以您需要告诉 Select2 在检测占位符时要查找的内容。这可以通过传递一个数据对象来完成placeholder，Select2 在检查时将使用该数据对象。

placeholder: {
  id: 'default', // or whatever the placeholder value is
  text: 'Select or enter application...' // the text to display as the placeholder
}

这将告诉 Select2 在value设置为时显示占位符default，在您的示例中，这似乎是占位符/默认选项。

我现在坚持的是如何始终将某个选项添加到 ajax 结果列表中。

虽然我认为我们可能已经解决了这里的 XY 问题，但我确实想指出，向 AJAX 结果列表添加一个新选项就像覆盖一样简单processResults。这是因为processResults将数据对象列表直接传递给 Select2，这为您提供了将新选项注入列表的安全位置。

您只需要将.push额外的数据对象放入results，然后将它们传递回 Select2。

于 2015-05-13T14:41:45.327 回答