使用 select2 ajax 发送数据-* 属性

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 应该是这样的：（当然，您可以随意使用它并进行调整）

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

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