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

Posted 2023-05-07

【中文标题】如何使用 Select2 和远程数据禁用某些选项

【英文标题】：How can I disable certain options with Select2 and remote data

【发布时间】：2013-08-16 08:02:42

【问题描述】：

Select2 在<select> 标记上初始化时支持禁用选项，如this issue 中所述

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

谢谢！

【参考方案1】：

在 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

---

同样可以使用ajax 包装器完成，它接受与query 函数格式相同的结果对象数组。

这是一个带有实际 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

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

【讨论】：

明天第一件事就试试这个！天哪，如果这真的有效，我简直不敢相信它是如此简单。我可以问一个问题：你怎么知道添加这个“禁用”属性？您是在文档中找到的，还是有根据的猜测？

@Moeri 没问题。 =] 我时不时地为 Select2 项目做出贡献，因此我对它的源代码相当熟悉 - 很容易找到它检查禁用属性的位置 (here)。但你是对的，这个选项有点隐藏，我会在今天晚些时候发送 PR 来更新文档。 :P

好的，谢谢！我还不能奖励我的赏金（还剩 2 小时），而且我住的地方已经很晚了，所以你明天也应该得到第一件事。感谢您的回答！虽然它真的很简单，但我喜欢你写出整个例子的方式。你肯定赢得了赏金。 :-)

好了，别着急，晚安。 =]我已经通过您的 GH 问题联系了 Igor，一旦我设法正确记录它，我将发送一个文档更新拉取请求。

顺便说一句，我已经创建了PR 来记录这一点，但还没有回复。

【参考方案2】：

select2 无法更改服务器数据，但您可以更改选项 在结果重新加载到页面之前

  $('.input-selector').select2(
  ajax: 
      url: function (params) 
        return '/to/url/resource.json';
      ,
      processResults: function (data) 
        var data_modified = $.map(data.results, function (obj) 
          obj.disabled = true; // or use logical statement
          return obj;
        );

        return  results: data_modified ;
      
    
  );