select下拉框多选

首先引入css 和 js 地址，下载地址

链接：https://pan.baidu.com/s/1G0gjJQt-OPJIqVDJbHCWLQ
提取码：eywf
将下载的三个文件引入到你自己的jsp中路径一定要对

设置样式

 .multiselect-container {height: 200px;overflow-y: auto;}.multiselect-selected-text{color:white;}.multiselect-container{width: 189px;}

添加jsp代码

<label class="col-xs-6 form-group"><span>平级派发：</span><select style="width:130px !important;"  id="levelDistribution" class="multiselect" multiple="multiple"></select>
</label>

初始化select

    initLevelDistribution();$('.multiselect').multiselect({         //.multiselect这个是select的class 也可以是idbuttonClass: 'btn',buttonWidth: 130,buttonText: function(options) {if (options.length == 0) {return '请选择平级部门';}else {var selected = '';options.each(function() {  //遍历每一个option，每一次点击都会重新加载selected += $(this).text() + ','; //多选拼接方式});return selected.substr(0, selected.length -1) ; //去掉最后的,号}},});

添加js代码拼接select

//动态为select 添加数据function initLevelDistribution(){$.ajax({url : $.cxt + "/workOrder/levelDistributionInfo", type: "POST",async:false,data :{},success : function(json) {if("0" == json.code){$("#levelDistribution").empty();for(i=0;i<json.data.length;i++){$("#levelDistribution").append($("<option>"+json.data[i].NAME+"</option>").val(json.data[i].ORG_ID))}}}})}

效果

select下拉框多选相关推荐

使用element ui select下拉框多选，编辑状态下回显数据
最近在做一个项目,项目的后端是地址:https://github.com/wangyuanjun008/wyj-springboot-security.git 前端地址是 https://github ...
select下拉框多选，超级好用！十分强大！
正文: 先说点废话:一个需求,想把select变成下拉多选,网上查找了半天,给出的方案都是自定义一个标签,或者弄个什么ul下面li进行选择,看起来就繁琐,本人只想在select上面做文章,不得已,自己 ...
bootstra select 下拉框多选，搜索效果
此处采用bootstrap-select插件,引入css和js bootstrap-select.css bootstrap-select.js bootstrap-select.min.css ...
select 下拉框的选中项的change事件
HTML文件<span style="float: left;">类型: <select id="type" class=&qu ...
JQuery从Excel表中获取数据添加到select下拉框多选的实现
JS代码如下 function importf(excel) {var perids = [];//for循环遍历Excel表中的数据,取出需要的列for(var i = 0 ; i < exc ...
html设置下拉筛选可以多选,select下拉框（支持筛选、多选）
Chosen 是一个支持jQuery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组, ...
ajax多选下拉,模拟select下拉框之多选（数据源采用模拟Ajax数据--原创）(示例代码)...
模拟select下拉框之多选 }ul,li{list-style:none; }#test{margin:20px 10px; }.clearfix:before, .clearfix:after{c ...
select下拉框（支持筛选、多选）
Chosen 是一个支持jQuery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组, ...
Layui实现动态生成select中的option项,同时设置select下拉框选中项
项目场景: 主要用于为民族select下拉框动态生成option值,同时在实现编辑功能时,表单中的select下拉框的选中项为后台传过来的数据. 举例: 如下图所示的表单内容,下图的民族和政治面貌se ...

select下拉框多选

select下拉框多选相关推荐

最新文章

热门文章