javascript make select 2使用由外部源设置的URL
我正在使用select2从数据库中挑选游戏，但是，我希望它从中搜索的文件将根据从下拉列表中选择的内容而改变。
我怎么得到它所以select2总是使用最新的“picker_url”？
因此，如果我从页面上的选择框中选择某个选项，它会更改“picker_url”（用于搜索的ajax文件）。 问题是，select2似乎只使用原始值。
这是我目前的代码：
var picker_url = "test1.php"; $(document).on('change', ".category_select", function(e) { var id = $(this).val(); if (id == 16) { picker_url = "test2.php"; } }); $(".game_picker").select2({ selectOnClose: true, width: '100%', ajax: { url: picker_url, dataType: 'json', delay: 250, data: function (params) { return { q: params.term // search term }; }, processResults: function (data) { return { results: $.map(data, function(obj) { return { id: obj.id, text: obj.text }; }) }; }, cache: true, }, minimumInputLength: 2 }); 在这里找到答案： https ： //github.com/select2/select2/issues/1679#issuecomment-280080742
var someCondition ajax: { url: function() { if (someCondition) { return '/api/1/someFile.json' } else { return '/api/1/someOtherFile.json' } } }
我建议使用dynamic-urls ，如下面的代码：
$('#mySelect2').select2({ ajax: { url: function (params) { return '/some/url/' + params.term; } } });
在url内部函数中，你可以测试除params之外的其他变量，如下面的代码片段所示：
$('#category').select2({ placeholder: "Select category...", width: '100%', }); $('#category').on('select2:select', function(e) { var data = e.params.data; console.log("category", data); categ = e.params.data.id; }); var categ = "1"; $('#project').select2({ placeholder: "Select item...", width: '100%', ajax: { type: "GET", url: function(params) { console.log("ajax func", params, categ); var url = 'https://jsonplaceholder.typicode.com/comments?postId=' + categ return url; }, cache: true, processResults: function(data) { return { results: $.map(data, function(obj) { return { id: obj.id, text: obj.name }; }) }; }, } });
我会保存您的默认选项，然后在需要时通过将新URL扩展为默认选项来重新创建select2：
var defaultOptions = { selectOnClose: true, width: '100%', ajax: { url: "test1.php", dataType: 'json', delay: 250, data: function (params) { return { q: params.term // search term }; }, processResults: function (data) { return { results: $.map(data, function(obj) { return { id: obj.id, text: obj.text }; }) }; }, cache: true, minimumInputLength: 2 }; //Use default to create first time $(".game_picker").select2(defaultOptions); //On change, recreate $(document).on('change', ".category_select", function(e) { var options = defaultOptions; if ($(this).val() == 16) { //Create a new options object with the url updated options = $.extend({}, defaultOptions, { url: 'test2.php' }); } //Create a select2 with the desired options $(".game_picker").select2(options); });