layui的select多选使用
select的多选使用
xm-select链接
最近完成一个需求,需要使用到select的多选。记录一下,方便下次使用,官方实例并没有找到自己想要的效果,但是想到了以前由@热爱前端的Java程序员 大佬写的从formSelect 到 xmselect的下拉框多选扩展组件。
参考
我想做的是
- 1.不在输入框显示选中的名称,因为如果太多的话,无论是隐藏还是自动扩大都不美观,改成自定义的。
- 2.不用checkbox、radio 。选中背景颜色改变,如下图,选中则为绿色,未选中则为原背景色。
- 3.默认选中一些数据。
1.首先引入我们需要的的xm-select.js文件
<script type="text/javascript" src="../../../js/xm-select.js"></script>
2.定义div
<div id="planType"></div>
3.渲染
var s = xmSelect.render({
el: '#planType',
width: '210px',//select的宽度
clickClose: false,//点击以后是否关闭
model: {//自定义input显示内容。
icon: 'hidden',//隐藏前面的checkbox、Radio
label: {
type: 'xxxx', //自定义与下面的对应
xxxx: {
template(data, sels){
return "已选择" + sels.length + " 项计划, 共 " + data.length + " 项"
}
},
}
},
data: [
{name: "川藏", value: "川藏",selected: true},
{name: "西南.二滩厂", value: "西南.二滩厂",selected: true},
{name: "川渝", value: "川渝",selected: true},
{name: "向家坝电厂", value: "向家坝电厂",selected: true},
{name: "复奉直流", value: "复奉直流",selected: true},
{name: "宾金直流", value: "宾金直流",selected: true},
{name: "德宝直流", value: "德宝直流",selected: true},
{name: "溪洛渡左岸电厂", value: "溪洛渡左岸电厂",selected: true},
{name: "锦屏官地电源组", value: "锦屏官地电源组",selected: true},
{name: "锦苏直流", value: "锦苏直流",selected: true},
{name: "长南特高压联络线", value: "长南特高压联络线"},
{name: "三峡电厂", value: "三峡电厂"},
{name: "长南", value: "长南"},
{name: "三峡", value: "三峡"},
{name: "施州直流", value: "施州直流"},
{name: "宜昌直流", value: "宜昌直流"}
]
})
1.model(显示方式):
1.1如果不加model 默认的样式
model: {
radio: true,//不写默认为checkbox:true
icon: 'hidden',//隐藏下拉列表的option前面的选择图标
label: {
type: 'block',
block: {
//最大显示数量, 0:不限制
showCount: 1,
//是否显示删除图标
showIcon: true,
}
}
},
4.获取选中的值 getValue() 取得选中的数组对象。
//var s = xmSelect.render({
var se = s.getValue()//s是我们前面定义的。
ps:不止一种的获取值的方式,更多参考xm-select详细文档,可以获得选中的数组对象值,value数组值,name组值。