时间戳

首页 > 解决方案 > 如何使用 Ajax 数据源对每个新请求进行 select2 下拉列表？

jquery - 如何使用 Ajax 数据源对每个新请求进行 select2 下拉列表？

问题描述

我在选择框内为多个 optgroup 使用 select2 js。我从 AJAX 成功调用中获取格式化的 JSON，下面是我的代码。它附加到选择框，但它与现有数据合并。我只想在选择框中显示 Return Ajax Data。我尝试使用 select destroy 和 reinialize 但它不起作用。请帮助我了解如何使新数据仅填充在 select2 中。在此处输入图像描述

$.post('/get_ajax_data/',{custom_param:1}, function(data){ 
        var result = data.result; 
        $("#client1_select").select2({ data:result }); 
        $('#client1_select').trigger("change"); 
    });

标签： jqueryjquery-select2

解决方案

问题是现有的选择框没有替换为新数据，而只是附加了旧数据。

您需要在添加新项目之前清空选择（我使用了一个按钮来模拟 ajax 调用）：

var result = [{
    "text": "ClientName + Version data is AJAX",
    "children": [{"id": "test1", "text": "test1", "disabled": true}, {
        "id": "test2",
        "text": "test2",
        "selected": "true",
        "disabled": false
    }, {"id": "test3", "text": "test3", "disabled": true}]
}, {
    "text": "Variant",
    "children": [{"id": "1_variant", "text": "single"}, {"id": "2_variant", "text": "dual"}]
}];


$('#client1_select').select2({data: result});
$('#btn').on('click', function (e) {
    $("#client1_select").empty().select2({data: result});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>


<button id="btn">Click me</button>
<select id="client1_select" name="states[]" multiple="multiple">
</select>

推荐阅读