layui下拉列表多选

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组值。