select2动态添加选项
select2查找选项时,如果不存在,如何动态添加用户输入的查找内容项目,实现如下效果。
select2默认的下拉选项
过滤后的选项,select2没有输入的匹配项目,给提示信息添加按钮点击添加选项
点击按钮后给select2添加新输入选项并选中,并且下拉出现此自定义项目
本示例居于Select2 4.0.3修改,其他版本注意修改选择器。
第一步,修改查找没有记录提示信息,大概4506行
/* noResults: function () { return 'No results found'; },*/ //===> noResults: function () { return '未找到匹配,<a href="#" class="addNew">添加此项</a>'; },
第二部,805行
/* $message.append( escapeMarkup( message(params.args) ) );*/ //===========> var me = this; $message.append( //escapeMarkup(//注释掉这个,要不无法添加html代码 message(params.args) // ) ).find('a.addNew').click(function () {//给添加链接按钮添加事件 var mul = me.$element.attr('multiple') !== undefined;//是否多选,多选的获取输入内容不一样 var v = mul ? me.$element.next().find(':input').val() : $(this).closest('span').prev().find('input').val(); me.$element.append('<option value="' + v + '" selected>' + v + '</option>').trigger('select2:select', v); me.$element.select2('close'); return false });
加支付宝好友偷能量挖...
原创文章,转载请注明出处:select2动态添加选项