1.layui的多选下拉框可以使用 xm-select 插件实现。使用步骤如下:1. 下载 xm-select 插件,并在页面中引入:
html<link rel="stylesheet" href="xm-select.css"><script src="xm-select.js"></script>
2. 初始化 xm-select:
jslayui.use(['xmSelect'], function(){var xmSelect = layui.xmSelect;// 初始化多选下拉框xmSelect.render({el: '#testSelect', // 选择器name: 'test', // input name data: [// 数据源 {name: '选项1', value: 1}, {name: '选项2', value: 2} ] });});
3. 在页面添加选择器
<div id="testSelect"></div>:
html<div id="testSelect"></div>
4. 这样一个基本的多选下拉框就创建成功了。你可以设置更多参数,如:- prop 设置显示和存储值的字段
- tips 提示信息
- lay-verify 校验规则
- lay-search 搜索功能
- max 最大选择数
完整 demo 如下:
html<!DOCTYPE html><html><head><meta charset="utf-8"><title>xm-select demo</title><link rel="stylesheet" href="/layui-v2.5.6/dist/css/layui.css"><link rel="stylesheet" href="../dist/css/xm-select.css"> </head><body><div id="testSelect"></div><script src="/layui-v2.5.6/dist/layui.js"></script><script src="../dist/xm-select.js"></script><script>layui.use(['xmSelect'], function(){var xmSelect = layui.xmSelect;xmSelect.render({el: '#testSelect',name: 'fruit',layVerify: 'required',max: 3,// 最多选择 3 个data: [ {name: '苹果', value: 1}, {name: '香蕉', value: 2},{name: '橙子', value: 3}] });});</script></body></html>
xm-select包下载地址见下：
xm-select包下载地址
