动态生成的select2 ajax触发器无法使用没有控制台日志错误

时间:2018-04-06 09:45:39

标签: jquery jquery-select2

我在我的页面中使用了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>

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

2 个答案:

答案 0 :(得分:0)

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

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
             }
           });
         });
     }

答案 1 :(得分:0)

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

即。 ID 文字

实施例

{
  "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>