Question

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

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
                };
            },
        }
    });

JSON使用AJAX从服务器返回

{"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中添加更多数据 - *属性，所以我可以得到类似这样的结果：

<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 change事件时，它将从响应中获取数据，并将其添加到页面中的元素中，当然，您可以将第一部分更改为所需的任何元素或值{{1} }

希望这将对需要此功能的任何人有所帮助，因为这对我自己很有帮助。

使用select2 ajax发送data- *属性

1 个答案: