之前做Php项目的时候有一个业务需求是需要给人员安排多个部门,且部门有二级分布,即做一个多选框,复选框样式有点小丑,就想选一个自己看着可以的,就找到了现在我使用的这个select2多选框,官网有许多可供选择的满足不同需求的选择框,包含单选、多选等(select2官网),我选择了一个符合自己需求的来做的,自行挑选,以下以我选择的案例书写。
一、效果演示
效果如下图所示:箭头指向的粗体为一级部门,圈住的为二级部门(因为需求是需要一级下对应的二级部门),选中的二级部门会在部门展示下拉面板显示为灰色,选中的展示框会显示选中的部门且在前面带一个❌,可点击删除,即部门展示面板选择灰色会即可取消。
二、实现准备
根据官网指示,在项目中需要导入一个css文件和两个js文件,可以下载到本地也可以直接使用他提供的路径
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
在html中添加代码(我是直接在项目中拷贝出来的,将实现代码更改为自己的el语法就好,我这个是在php项目中做的)
select是展示部门的面板,optgroup是一级部门,option是二级部门
<div>
<input type="hidden" id="select_id" name="select_id" value=""/>
<select id="mySelect" class="js-example-basic-multiple" value="" name="states[]" multiple="multiple" style="width:750px;height:30px" >
<{foreach from=$cool_list item="detest" name="detest"}>
<optgroup label="<{$detest.name}>">
<{foreach from=$detest.sub item="deson" name="deson"}>
<option value="<{$deson.name}>"><{$deson.name}></option>
<{/foreach}>
</optgroup>
<{/foreach}>
</select>
</div>
在js中还需填加一些内容,subsub()方法是我在提交按钮处写的一个向后台传值的事件,因为真正的传值是在input的那个隐藏表单里进行的,所以往后台传值就需要事件进行触发,但是在select上添加事件无法触发,这个也是当时自己纠结好久的地方。至于后面的两个方法是为了编辑进入的时候可以展示原有选中的部门和可以直接根据❌删除,看自己需求是否需要咯。还有需要注意的因引入了jQuery所以原本我只有js的部门需要进行一定的修改,比如元素定位,为了不与原有代码冲突,都只能用最基本的id和class定位,这里也是一个坑。
<script>
function subsub(){
var lis = document.getElementsByClassName('select2-selection__choice');
if(lis.length>0){
var str = '';
for(var i=0;i<lis.length;i++){
if(lis[i].getAttribute('title')){
str += lis[i].getAttribute('title')+',';
}
}
document.getElementById('select_id').setAttribute('value',str);
}
document.getElementById('form_savePresales').submit();
}
$(document).ready(function() {
$('.js-example-basic-multiple').select2({
// data:'$depentListFirsts',
// placeholder: 'This is my placeholder',
// allowClear: true,
});
var mySelect = '<{$list}>';
if(mySelect){
var listval =mySelect.split(',');
for(var j = 0;j<listval.length;j++){
htmlStr = '<li class="select2-selection__choice" id="removeli'+j+'" title="'+listval[j]+'" ><span class="select2-selection__choice__remove" id="remove'+j+'" onclick="remove('+j+')" role="presentation">×</span>'+listval[j]+'</li>';
$(".select2-selection__rendered").prepend(htmlStr);
}
}
});
function remove(j){
var idObject = document.getElementById('remove'+j);
var idObjectli = document.getElementById('removeli'+j);
if (idObject != null){
idObjectli.parentNode.removeChild(idObjectli);
}
}
</script>