使用 select2 ajax 发送 data-* 属性

Posted 2023-05-07

【中文标题】使用 select2 ajax 发送 data-* 属性

【英文标题】：Send data-* Attributes with select2 ajax

【发布时间】：2018-03-19 13:42:12

【问题描述】：

我有以下代码供 select2 使用 ajax 从服务器加载，它工作正常。

Javascript 代码

$('.MySelect2').select2(
    
        ajax:
        
            url: 'https://example.com/Source',
            type: 'POST',
            dataType: 'json',
            delay: 100,
            Results: function (data, page)
            
                return 
                    results: data.items
                ;
            ,
            data: function (params) 
            
                return 
                    q: params.term, page: params.page, pg: 10
                ;
            ,
        
    );

使用 AJAX 从服务器返回 JSON

"results": 
 ["id": "MyID1","text": "MyText1",]
,["id": "MyID2","text": "MyText2",]
,["id": "MyID3","text": "MyText3",]
,"pagination":  "more": true  

结果选项将是

<option value="MyID1">MyText1</option>
<option value="MyID2">MyText2</option>
<option value="MyID3">MyText3</option>

我的问题是如何在 JSON 中添加更多 data-* 属性，这样我就可以得到类似这样的结果：

<option value="MyID1" data-extra-info="x1">MyText1</option>
<option value="MyID2" data-extra-info="x2">MyText2</option>
<option value="MyID3" data-extra-info="x3">MyText3</option>

【问题讨论】：

您可以在创建每个选项时添加 data-extra-info 属性

这些选项是使用 JSON 自动创建的。那么在哪里放置数据额外信息呢？我试图把它放在 JSON 中，但它不起作用

我建议你阅读jqyery-select2文件有一些解决方案

相信我，select2 文档是有史以来最糟糕的文档之一。

这个问题你解决了吗？我也有，找不到有效的解决方案..

【参考方案1】：

这个问题给我带来了巨大的痛苦和头痛，直到我能够找到解决方案并满足我的需求。

首先，您的 JSON 响应应该如下所示：

[
   "id":"MyID1", "text":"MyText1", "MyData1":"Test1", "MyData2":"Hello World",
   "id":"MyID2", "text":"MyText2", "MyData1":"Test2", "MyData2":"Hola Mundo",
   "id":"MyID3", "text":"MyText3", "MyData1":"Test3", "MyData2":"Bonjour le monde"
]

确保在 JSON 响应中添加了所有额外的数据属性后，您的 javascript 应该是这样的：（当然，您可以随意调整它） p>

$(document).ready(function()
   $("#YourDropDownID").select2(
      ajax: 
        url: "url",
        type: "post",
        dataType: 'json',
        delay: 250,
        data: function (params) 
           return 
              searchTerm: params.term
           ;
        ,
        processResults: function (response) 
           return 
              results: response
           ;
        ,
        cache: true
      
   ).on('change', function(e) 
       document.getElementById("ElementID1").innerhtml = $(this).select2('data')[0].MyData1;
       document.getElementById("ElementID2").innerHTML = $(this).select2('data')[0].MyData2;
   );
);

只是简单解释一下这里发生了什么：

.on('change', function(e) 
      document.getElementById("ElementID1").innerHTML = $(this).select2('data')[0].MyData1;
      document.getElementById("ElementID2").innerHTML = $(this).select2('data')[0].MyData2;
);

当 select2 change 事件发生时，它会从响应中获取数据，并将其添加到页面中的一个元素中，当然，您可以将第一部分更改为您需要的任何元素或值document.getElementById("ElementID1").innerHTML

希望这会帮助任何需要它的人，因为它对我自己很有帮助。

【讨论】：

非常感谢您。 $(this).select2('data')[0] 就是我要找的。​​span>