原文连接:https://blog.csdn.net/u010784959/article/details/77893674
-----------------------------------------------------------------------------
根据输入框中内容,动态更新select2组件中option内容
监听输入框内容变化事件,先销毁原有select2组件,再重新初始化select2组件
关键代码:
<div>
<input id="name" class='form-control' style='width:200px'/>
<select class="select2" id="id1" style="width:50%"></select>
</div>
js代码:
$(function () {
var $select = $('#id1');
var instance;
$("#name").on('input', function(){
var data = [];
var content = $("#name").val();
var arr = content.split(",");
for(var i=0;i<arr.length;i++){
data.push({id:'' + i, text:arr[i]});
}
instance = $select.data('select2');
if(instance){
$select.select2('destroy').empty();
}
$('#id1').select2({
dropdownAutoWidth: true,
multiple: true,
data: data
});
});
});
jQuery、bootstrap及select2关键文件引入此处忽略,需另外自行引入