select2

select2.js是一款下拉框插件

代码演示参考 若依系统 → 实例演示 → 表单元素 → 下拉框 form/select.html（项目使用需要引入css和js）

1、<th:block th:include="include :: select2-css" />2、<th:block th:include="include :: select2-js" />

属性类型默认值描述
dataArrayNull数据集合，基础数据格式{id:"", text:"", selected: true, disabled: true}
widthstring空宽度
stylestring空样式
ajaxobjectnullAjax请求数据
minimumResultsForSearchIntegernull设置支持搜索的最小集合，设置为负数，隐藏搜索框
minimumInputLengthInteger空输入指定长度字符后开始搜索
multiplebooleanfalse是否多选，默认单选
maximumSelectionLengthInteger空支持最大的选择数量，int/function
maximumInputLengthInteger空支持搜索的最大字符数
placeholderString空选择提示
allowClearBooleanfalse是否显示清除按钮，只有设置了placeholder才有效
closeOnSelectBooleantrue是否选中后关闭选择框，默认true
templateSelectioncallback空选中项样式
templateResultcallback空选项样式
matchercallback空过滤选项集合
sortercallback空选项结果集排序
themeString空主题，可以设置bootstrap主题
tagsBoolean空是否可动态创建选项
tokenSeparatorsArray空输入时使用分隔符创建新选项
createTagcallback空创建新标签
insertTagcallback空在选项集合后插入标签
disabledbooleanfalse是否失效
debugbooleanfalse是否开启debug
  1. // select2 常用方法
  2. $('#id').select2('val');                            // 取值
  3. $("#id").select2("val", ["RuoYi"]);                 // 单个赋值
  4. $("#id").val(["RuoYi"]).trigger("change");          // 单个赋值
  5. $('#id').val(['Admin', 'RuoYi']).trigger("change"); // 多个赋值
  6. $("#id").select2("open");                           // 打开下拉框
  7. $("#id").select2("close");                          // 关闭下拉框
  8. $('#id').prop('disabled', true);                    // 禁用
  9. $('#id').prop('disabled', false);                   // 启用
  10. $('#id').select2('destroy');                        // 销毁
  11. <!--  事件监听
  12. change 
  13. change.select2
  14. select2:closing 
  15. select2:close 
  16. select2:opening 
  17. select2:open
  18. select2:selecting 
  19. select2:select 
  20. select2:unselecting 
  21. select2:unselect
  22. -->
  23. $('#id').on('select2:select', function (e) {
  24.   // 处理自己的业务
  25. });