在下拉菜单中使用 ajax 让 select2 刷新数据

Question

我有以下 JavaScript 使用 select2 https://select2.github.io/

填充下拉列表

它工作正常，并在第一次加载页面时填充列表。从那时起，即使添加了数据，它也不会刷新列表，因为它只调用一次 AJAX 。即使我重新加载页面，下拉列表也不会刷新，也不会触发 AJAX 调用（除非我关闭并重新打开浏览器，然后触发 AJAX 调用）

有没有办法在每次打开下拉菜单时进行 ajax 调用。我尝试了 .on("select2-open") 选项，但没有任何运气。

抱歉 JavaScript 我不太了解。

$("#Location").select2({
            placeholder: "Select a known location", // Placeholder text
            allowClear: true, //Allows deselection of chosen address
            ajax: {
                url: '/AlertInterface/NewAlertLocations', // Where we want the ajax to call
                dataType: 'json', // The datatype we are expecting to be returned
                type: "GET", //Just a get method
                //Data: allows us to pass a parameter to the controller
                data: function (query) {
                    console.log(query)
                    return { search: query.term }
                },
                //processes the results from the JSON method and gives us the select list
                processResults: function (data) {
                    console.log(data)
                    return {
                        results: JSON.parse(data)
                    };
                }
            }
        });

编辑：

我确实尝试使用

$("#Location").on("select2:open", function () { $("#Location").select2(); })

但这并没有帮助。 :-(

Answer 1

您的代码中存在语法错误。请检查以下代码，

$("#Location").select2({
            placeholder: "Select a known location", // Placeholder text
            allowClear: true, //Allows deselection of chosen address
            ajax: {
                url: '/AlertInterface/NewAlertLocations', // Where we want the ajax to call
                dataType: 'json', // The datatype we are expecting to be returned
                type: "GET", //Just a get method
                //Data: allows us to pass a parameter to the controller
                data: function (query) {
                    console.log(query)
                    return { search: query.term }
                },
                //processes the results from the JSON method and gives us the select list
                processResults: function (data) {
                    console.log(data)
                    return {
                        results: JSON.parse(data)
                    };
                }
            }
    });

在下拉菜单中使用 ajax 让 select2 刷新数据

Getting select2 to refresh data using ajax on dropdown

asp.net-ajax

jquery-select2

asp.net-mvc-5