select2动态添加选项

  select2查找选项时,如果不存在,如何动态添加用户输入的查找内容项目,实现如下效果。

select2动态添加选项
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压缩包

加支付宝好友偷能量挖...


原创文章,转载请注明出处:select2动态添加选项

评论(0)Web开发网
阅读(2178)喜欢(3)JavaScript/Ajax开发技巧