select2 多选下拉框的使用

1.引入select2的js、css文件；（建议最好下载到本地后，再本地引入）

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

2.在select标签上添加 `multiple="multiple"`属性

<div><span>处理人：</span><select class="combox" id="handle_userArr" onchange="handle_where();" multiple="multiple"><option value='1'>张三</option><option value='2'>李四</option><option value='3'>王五</option><option value='4'>宋六</option><option value='5'>马七</option><option value='6'>梁八</option></select>
</div>

3.召唤select2方法

<script type="text/javascript">//唤醒select2插件$("#handle_userArr").select2({width: '60%',placeholder: "请至少选择一个人名",allowClear: true,minimumInputLength : 0});
</script>

4.优化select2样式

<style type="text/css">.select2-selection{height: 32.5px;margin-top: -6px;}.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color: #2255a4;}
</style>

5.获取select2的值

//获取方式
var handle_userArr = $('#handle_userArr').val();//获取格式=["IT服务台", "崔**", "冯*", "赵**", "赵*"]

效果图：

select2 多选下拉框的使用相关推荐

【学亮IT手记】angularJS select2多选下拉框实例
永远保持对大部分知识的好奇心,学习从不枯燥,也没有被逼学习一说,乐此不疲才是该有的心态和境界!!! 引入相关js库: html部分代码: angularJS定义数据源变量: 更多专业前端知识,请上 ...
select2 手动输入匹配下拉框内容可多选
这里我选择的是select2这个插件. 官网地址:https://select2.org/getting-started/builds-and-modules 主要实现输入框可以有多选下拉框 < ...
rails使用html form,Rails 页面多选下拉框, form_for, form_tag 使用技巧及 select2 使用
表单的多选下拉框在 web 项目中比较常用且常见,所以快速构建多选下拉框是每个 Rails 全栈开发者必备的技能. 这篇文章总结使用 select2 前端插件和 Rails 内置的视图帮助方法 sel ...
jquery --- 多选下拉框的移动(穿梭框)
效果如下: 几个注意地方: 1.多选下拉框需要添加 multiple 2.获取选中的元素KaTeX parse error: Expected 'EOF', got '#' at position 3 ...
Angular实现虚拟滚动多选下拉框笔记
要求: 实现一个angular多选下拉框组件,当有超过2000个选项时,滑动/挑选/全选均不卡. 正篇: 为了方便,这里不考虑扩展性,所以规定下拉框展开只显示7行数据,行高27px 约定:input为 ...
html css 多选下拉框,jQuery多选下拉框插件
jquery.multi-select.js是一款jQuery多选下拉框插件.该插件可以将select元素转换为带checkbox的多选下拉框,非常实用. 使用方法在页面中引入下面的文件. lt;l ...
HTML多选mysql,html多选下拉框 | 学步园
一个jquery ui,实现html的多选下拉框,在下拉里面加checkbox,不改变页面的提交特性,只是动态的改变select选中的多选数据. jsp页面例子: pageEncoding=" ...
jquery easyui 多选下拉框的实现
为什么80%的码农都做不了架构师?>>> jquery easyui 多选下拉框的实现修改官方提供的demo实例,本来是单选的,让她编程多选,完成了勾选和去勾选的所有功能. ...
bootstrap-multiselect.js多选下拉框初始化时默认选中初始值
bootstrap-multiselect.js多选下拉框默认值设置一.案例数据格式二.HTML代码 <select id="msgRoles" multiple=&q ...

select2 多选下拉框的使用

1.引入select2的js、css文件；（建议最好下载到本地后，再本地引入）

2.在select标签上添加 `multiple="multiple"`属性

3.召唤select2方法

4.优化select2样式

5.获取select2的值

效果图：

select2 多选下拉框的使用相关推荐

最新文章

热门文章

select2 多选下拉框的使用

1.引入select2的js、css文件；（建议最好下载到本地后，再本地引入）

2.在select标签上添加 multiple="multiple"属性

3.召唤select2方法

4.优化select2样式

5.获取select2的值

效果图：

select2 多选下拉框的使用相关推荐

最新文章

热门文章

2.在select标签上添加 `multiple="multiple"`属性