前端插件之Select2使用 (2)

allowClear： 是否显示清楚按钮，默认false，如果设置为true，需要同时配置placeholder，否则可能会引起js报错：

TypeError: Cannot read property 'id' of undefined

maximumSelectionLength： 配置最多能选择多少项

配置说明

另外还有几个配置上边没有讲到的：

width： 宽度，例如100%

multiple： 是否支持多选，默认false

closeOnSelect： 是否选中后关闭选择框，默认true

tags： 是否可以动态创建选项

disabled： 是否禁用

debug： 是否开启debug模式

使用进阶

获取已选择的值，无论是单选还是多选都可以用下边的代码来获取选择的option

$('#id_select2_demo4').select2('val')

获取已选择的对象

$("#id_select2_demo4").select2("data")

如果想要拿到已选择option的text值，可以通过如下方法，以下代码中的[0]用来获取第一个对象，对单选合适，如果是多选的话需要循环获取

$("#id_select2_demo4").select2("data")[0].text

selected，初始化值，设置选中项

# 单选情况下val为数字，这里的selectx为 $("#id_select2_demo1").val(2).trigger("change"); # 多选情况下val为列表 $("#id_select2_demo4").val([2,3,5]).trigger("change");

清空已选择的值，无论是单选还是多选都可以这样清除

$("#id_select2_demo1").val(null).trigger('change'); $("#id_select2_demo4").val(null).trigger('change');

禁用select2

$("#id_select2_demo1").prop('disabled',true);; $("#id_select2_demo4").prop('disabled',true);;

动态添加select的option

$('#add').click(function() { var _html = '<option value="9" selected>ops-coffee.cn</option>'; $('#id_select2_demo1').append(_html).trigger('change.select2'); $('#id_select2_demo1').select2("open"); })

change.select2： 新增select数据后触发select2更新

.select2("open")： 打开select，open改为close可动态关闭select，改为destroy可销毁select2，恢复select默认样式

完整Demo

为了方便大家学习，我写了个完整的demo，你可以在线查看效果或下载代码应用到自己的项目中

在线Demo地址：https://demo.ops-coffee.cn/select2/

Github源码地址：https://github.com/ops-coffee/demo/tree/master/select2