从ajax中设置json数据，并使其在select2 jQuery中可搜索
我有两个下拉输入字段，都在实现Select2 Jquery。 在这里，我将数据设置为第一次下拉静态。 它的工作正常。 根据第一个下拉列表中的值选择，下一个下拉列表将由ajax的另一组json数据填充。 我需要第二次下拉应该只有一次加载ajax数据可搜索。 但我没有得到正确的答案。 我无法使其可行。
我使用了以下脚本
function format(item) { return item.name; } var data=[{"id":"1995","name":"Banahatti"},{"id":"5074","name":"Kolhapur(Maharashtra)"},{"id":"2356","name":"Sangola"},{"id":"906","name":"Shahada"}]; $("#txtSource").select2({ data:function() { return { text:'name', results: data }; }, formatSelection: format, formatResult: format }); 对于第二次下拉加载如下
var theID,desdata; $("#txtSource").on('change',function(){ theID = $("#txtSource").select2('data').id; desdata= $.getJSON('api/destination.php',{source:theID}); //console.log(desdata); }); $("#txtDestination").select2({ data:function() { return { text:'name', results:desdata }; }, formatSelection: format, formatResult: format });
我刚才有类似的情况。 我的目标是将select2链接到正常选择的更改事件。 挑战在于如何将动态值传递到URL中。
select2文档说$ opts.ajax.url可以是一个函数。 但是，当我将console.log放入此函数时，我意识到它只在初始化期间被调用。
这是我的解决方案 – 每次其他选择更改时，它会销毁并重新创建select2。
$opts = { placeholder: "Category ...", minimumInputLength: 0, dropdownAutoWidth: true, ajax: { url: getcategoryajaxurl(), dataType: 'jsonp', quietMillis: 100, data: function (term, page) { // page is the one-based page number tracked by Select2 return { q: term, //search term page_limit: 10, // page size page: page, // page number }; }, results: function (data, page) { var more = data.total > 10; // return 11 when 10 asked for to show more available whether or not there are more results available // notice we return the value of more so Select2 knows if more results can be loaded return {results: data.results, more: more}; } }, id: function(e) { return e.id; }, escapeMarkup: function(m) { return m; }, initSelection : function (element, callback) { var data = {id: element.val(), text: element.val()}; callback(data); }, //Allow manually entered text in drop down. createSearchChoice: function(term, data) { if ( $(data).filter( function() { return this.text.localeCompare(term) === 0; }).length === 0) { return {id:term, text:term}; } }, }; function getcategoryajaxurl() { return "/ajax/categories.typeahead.php?doctypeid=" + $("#doctypeid").val(); } function setupcategoriesselect2() { $opts = select2textOpts("Category ...", 'categories', true, "?doctypeid=33"); $opts.ajax.url = getcategoryajaxurl(); $opts.createSearchChoice = null; $("#categoryid").select2( $opts ); } $(document).ready(function () { $('#doctypeid').change( function(e) { $('#categoryid').select2("destroy"); setupcategoriesselect2(); }); setupcategoriesselect2(); });
您必须更改data（）函数。 它应该尝试在变量中找到已下载或硬编码的数据（应该是像{obj.firstSelectKey：{results：data []}这样的对象），用于存储select2结果。 如果特定密钥下没有数据，则应该执行ajax请求。
还有jQuery ajax / select2 ajax请求的缓存参数，但它是由浏览器处理的，所以不是你决定是否应该存储ajax数据而是浏览器。 浏览器xhr缓存无法控制。