动态生成的 select2 ajax 触发器无法正常工作，没有控制台日志错误

Posted 2023-05-07

【中文标题】动态生成的 select2 ajax 触发器无法正常工作，没有控制台日志错误

【英文标题】：Dynamically generated select2 ajax trigger not working with no console log error

【发布时间】：2018-09-16 07:29:19

【问题描述】：

我在我的页面中使用 AdminLTE 的 select2。当我在一个页面中动态创建多个 select2 多选 ajax 控件时，这些控件不起作用（ajax 请求不会触发，控制台或网络中没有错误）。

<pre>
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/bower_components/select2/dist/css/select2.min.css">
<script src="https://adminlte.io/themes/AdminLTE/bower_components/select2/dist/js/select2.full.min.js"></script>

  <select id="filter_value_1"  class="chosen-select form-control 
 select2 filter_value fil_sel select2-hidden-accessible"></select>

 <select id="filter_value_2"  class="chosen-select form-control 
 select2 filter_value fil_sel select2-hidden-accessible"></select>

 <select id="filter_value_3"  class="chosen-select form-control 
 select2 filter_value fil_sel select2-hidden-accessible"></select>
 </pre>

在没有控制台错误的情况下填充数据的问题

【问题讨论】：

“它不工作”是一个无用的声明。什么不起作用？ Select2 的实例，或者 AJAX 调用，还是别的什么？请检查控制台以获取有关问题所在的线索

控制台中没有显示错误，ajax 请求也不会触发

您是否以正确的格式从 AJAX 调用返回数据？ select2.org/data-sources/ajax

是的。它适用于单选。

能否为单个工作项创建小提琴？

【参考方案1】：

我从这个链接得到了一个解决方案

https://forums.select2.org/t/preselecting-options-in-an-remotely-sourced-ajax-select2-with-custom-data-atribute/26

var sendurl ='http://...';
   for(var i=1;i<5;i++)
       var sSelect = $('#filter_value_'+i);
       $.ajax(
              type: 'GET',
              dataType: 'json',
               url: sendurl
       ).then(function (data) 
                 console.log(data);
             // create the option and append to Select2
            var option = new Option(data.text, data.id, true, true);
             $('.select2s').append(option).trigger('change');

          // manually trigger the `select2:select` event
            sSelect.trigger(
            type: 'select2:select',
            params: 
                data: data
             
           );
         );
     

【参考方案2】：

根据document，您只需要特定格式的数据，

即id 和 text 对

例子

  "results": [
    
      "id": 1,
      "text": "Option 1"
    ,
    
      "id": 2,
      "text": "Option 2"
    
  ]

网址https://api.github.com/orgs/select2/repos这个没有那种格式，所以先要格式化一下。

我做了一些改变，

希望这能解决你的问题。

$(document).ready(function()

	$('#filter_value_1').select2(
  ajax: 
	url: 'https://api.github.com/orgs/select2/repos',
	dataType: 'json',
	processResults: function (data) 
		  return 
			results: setData(data,'default_branch')
		  ;
		
	
);
function setData(data, text)
	for(i =0;i<data.length;i++)
		data[i]["text"]=data[i][text];
	
	return data;


$('#filter_value_2').select2(
   ajax: 
	url: 'https://api.github.com/orgs/select2/repos',
	dataType: 'json',
	processResults: function (data) 
		  return 
			results: setData(data,'description')
		  ;
		
	
);
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/bower_components/select2/dist/css/select2.min.css">
<script src="https://adminlte.io/themes/AdminLTE/bower_components/select2/dist/js/select2.full.min.js"></script>

 <select id="filter_value_1" style="width:200px;"></select>
   	 <select id="filter_value_2"  style="width:200px;"></select>