javascript 如何禁用 Select2 和远程数据的某些选项

How can I disable certain options with Select2 and remote data

提问by Moeri

Select2 supports disabled options when it is initialized on a <select>tag, as discussed in this issue

Select2 在<select>标签上初始化时支持禁用选项，如本期所述

However, I can't find how to achieve the same result with remote data. Do I need to use a custom format function? How do I prevent the user from selecting it then? Or is this built-in somewhere?

但是，我找不到如何使用远程数据实现相同的结果。我需要使用自定义格式功能吗？我如何防止用户选择它呢？或者这是内置的？

Thanks!

谢谢！

回答by Fabrício Matté

In Select2 3.4.2 you just need to add a disabled: trueproperty to the given result object. Practical example with a queryfunction:

在 Select2 3.4.2 中，您只需disabled: true要向给定的结果对象添加一个属性。带有query函数的实际示例：

$('input').select2({
    query: function(query) {
        //do ajax call which retrieves the results array in this format:
        var data = {results: [
            { id: 1, text: 'disabled option', disabled: true },
            { id: 1, text: 'hi' }
        ]};
        //pass it to the query callback inside your Ajax callback:
        query.callback(data);
    }
});

Demo

演示

---

---

The same can be done using the ajaxwrapper, which accepts a result objects array in the same format as the queryfunction.

使用ajax包装器也可以做到这一点，它接受与query函数格式相同的结果对象数组。

Here's a demo with an actual Ajax call (through jsFiddle's JSON API):

这是一个带有实际 Ajax 调用的演示（通过 jsFiddle 的 JSON API）：

$('input').select2({
    ajax: {
        url: '/echo/json/',
        dataType: 'json',
        params: {
            method: 'post'
        },
        data: function (term, page) {
            // Data to be sent to the server. Usually it is just the "term"
            // parameter (and page if using pagination).
            // However, since this API simply echoes back what we send,
            // I'll build the results array here
            var resultsArr = [];
            for (var i = 0; i < 10; i++) {
                resultsArr.push({
                    id: i,
                    text: 'opt'+i,
                    //randomly disable a couple options for demo purposes
                    disabled: Math.random() < .3
                });
            }
            return {
                json: JSON.stringify(resultsArr)
            }
        },
        results: function(data, page) {
            //data param === received response from the server. As dataType
            //is json, jQuery automatically parses the response into an object.
            //So, in this case, we received the resultsArr that we sent.
            //Now return it in the correct format: { results: resultsArr }
            return { results: data };
        }
    }
});

Demo

演示

Remember that the datafunction in this last example is just to properly use the jsFiddle API - you should keep your original datafunction which sends the query term. All you have to do is modify the response so that the result objects include a disabled: trueproperty in the results that you want to be disabled, in the same format as the first example.

请记住，data最后一个示例中的函数只是为了正确使用 jsFiddle API - 您应该保留data发送查询词的原始函数。您所要做的就是修改响应，以便结果对象disabled: true在结果中包含您想要禁用的属性，格式与第一个示例相同。