使用 select2 ajax 发送 data-* 属性

Question

我有以下代码供 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>

Answer 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

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