bootstrap select2 使用简单介绍

最新推荐文章于 2022-08-31 18:48:28 发布

weixin_30920091

最新推荐文章于 2022-08-31 18:48:28 发布

阅读量261

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hunterCecil/p/7593622.html

本文介绍Select2插件的基本属性配置方法及常用操作，包括初始化设置、下拉列表的增删改查等，适用于单选或多选场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 基本属性配置：　

$("#select2-id").select2({
     templateResult : formatState, // 列表带图片
     templateSelection : formatState, // 选中的带图片
     language: "zh-CN", //设置 提示语言
     width: "100%", //设置下拉框的宽度
     placeholder: "请选择", // 空值提示内容，选项值为 null
     //placeholder: {id: '', text: "请选择"}, // 同上，这里默认空值为 ''
     minimumInputLength: 10  //最小需要输入多少个字符才进行查询
     allowClear: true, //是否允许清空选中
     tags: false,  //设置必须存在的选项 才能选中，设置不存在的值则为null,如果 placeholder: {id: '', text: "请选择"} 则为 ''
     selectOnClose: true, // 如果没有手动选中，下拉框消失后会自动选中被hover的选项 （不建议使用）
     closeOnSelect: false, // 选择后下拉框不会关闭（单选-不建议使用）
     minimumResultsForSearch: Infinity, // 隐藏搜索框
     theme: "classic", // 样式
     maximumSelectionLength: 3,  // 多选 - 设置最多可以选择多少项
     tokenSeparators: [',', ' '], // 多选 - 输入逗号和空格会自动完成一个选项 前提是：tags: true
});

　　2. 常用基本操作：

2. 操作：
(1) 移除/销毁
　　$("#select2-id").select2("destroy");

（2）清空下拉框列表值
　　$("#select2-id").empty();

（3）设置下拉列表
　　// 单选 - 必须有一项为空值，否则默认选择第一项（如果必须选择一项可以不设置空值）
　　$("#select2-id").append($("<option>", {value: '', text: '全部'}));
　　$("#select2-id").append($("<option>", {value: 'value1', text: 'text1'}));
　　$("#select2-id").append($("<option>", {value: 'value2', text: 'text2'}));

　　// 多选 - 不能有一项为空值，否则再清空时会出BUG
　　$("#select2-id").append($("<option>", {value: 'value1', text: 'text1'}));
　　$("#select2-id").append($("<option>", {value: 'value2', text: 'text2'}));

（4）赋值
　　// 赋值 - 单选
　　$("#select2-id").val('value').trigger("change");

　　// 赋值 - 多选
　　$("#select2-id").val(['value1','value2']).trigger("change");

（5）获取中值
　　// 多选返回数组，单选返回字符串
　　$("#select2-id").val();

更多操作可参考：http://www.cnblogs.com/landeanfen/p/5099332.html

　　　　　　　　http://www.cnblogs.com/cloudshadow/p/bootstrap_select2.html

转载于:https://www.cnblogs.com/hunterCecil/p/7593622.html