<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="component/pear/css/pear.css" />
<title></title>
</head>
<body class="pear-container">
<form class="layui-form" action="">
<div class="mainBox">
<div class="main-container">
<div class="layui-form-item">
<label class="layui-form-label">下拉单选</label>
<div class="layui-input-block">
<select name="demo0" id="demo0" lay-verify="demo0">
<option value="">请选择</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">下拉多选</label>
<div class="layui-input-block">
<select name="demo1" id='demo1' xm-select="demo1" xm-select-skin="normal"
lay-filter="demo1">
<option value="">请选择</option>
<option value="2" selected="selected">上海</option>
<option value="3">广州</option>
<option value="4" selected="selected">深圳</option>
<option value="5">天津</option>
</select>
</div>
</div>
</div>
</div>
</form>
<script src="component/layui/layui.js"></script>
<script src="component/pear/pear.js"></script>
<!--引入layui及paer必备文件-->
<script>
//引入需要加载的模块form,jquery,select必须，layui多选是基于formselects，http://sun.faysunshine.com/layui/formSelects-v4/dist/formSelects-v4.js
layui.use(['form', 'jquery', 'common', 'select'], function() {
let form = layui.form;
let $ = layui.jquery;
let layer = layui.layer;
let select = layui.select;
let common = layui.common;
var keys = [];
for (var i = 1; i <= 10; i++) {
$('#demo0').append(new Option('单项：' + String(i), i));
//下拉单选加入选项内容
//为下拉多选加入内容作准备
var temp = {
"name": '单项：' + String(i),
"value": i //这里需要注意，value应该不同
}
keys.push(temp)
//console.log(i);
};
//下拉多选需要的arr是[{"name1":"shuju1","name2":"shuju2"},{....}]这样的格式
//demo1为上面select的id名
select.data("demo1", "local", {
arr: keys
});
//下拉框渲染
form.render('select');
//多选选定
select.value('demo1',[2,3],true);
select.on('demo1', function(id, vals, val, isAdd, isDisabled, ) {
console.log(id, vals, val, isAdd, isDisabled);
//return false;
})
});
</script>
<!--
https://blog.csdn.net/qq_21718533/article/details/122705384
xm-select 多选核心, 标记不同的多选, 多选ID xm-select="id"
xm-select-max 多选最多选择数量 xm-select-max="3"
xm-select-skin 皮肤 xm-select-skin=" default | primary | normal | warm | danger "
xm-select-search 本地搜索 & 远程搜索 xm-select-search, xm-select-search="/search", 值为空时已有条目过滤搜索, 有值时开启远程搜索
xm-select-create 条目不存在时创建, 标记性属性 xm-select-create
xm-select-direction 下拉方向 xm-select-direction="auto|up|down", 自动, 上, 下, 默认自动模式
xm-select-radio 单选模式 xm-select-radio, 最多只能选择一个
xm-select-search-type 搜索框的显示位置 xm-select-search-type="title" 在下拉选title部分显示, xm-select-search-type="dl" 在选项的第二条显示
xm-select-show-count 多选显示的label数量 xm-select-show-count="2", 超出后隐藏
xm-select-search 搜索 xm-select-search=""
获取选中的数据。
formSelects.value('select1'); // [{"name":"上海","val":"2"},{"name":"深圳","val":"4"}]
formSelects.value('select1', 'all'); // [{"name":"上海","val":"2"},{"name":"深圳","val":"4"}]
formSelects.value('select1', 'val'); // ["2","4"]
formSelects.value('select1', 'valStr'); // 2,4
formSelects.value('select1', 'name'); // ["上海","深圳"]
formSelects.value('select1', 'nameStr');// 上海,深圳
设置select的选中值。
formSelects.value('select1', [2, 4]); // 选中value为2和4的option → 上海,深圳
追加或删除select的选中值。
formSelects.value('select1', [2, 4], true); // 追加value为2和4的option, 如果该值已选中则跳过, 该值未选中则选中
formSelects.value('select1', [2, 4], false);// 删除value为2和4的option, 如果该值没有选中则跳过, 该值被选中则取消选中
监听select的选中与取消。
var formSelects = layui.formSelects;
formSelects.on('select1', function(id, vals, val, isAdd, isDisabled){
//id: 点击select的id
//vals: 当前select已选中的值
//val: 当前select点击的值
//isAdd: 当前操作选中or取消
//isDisabled: 当前选项是否是disabled
//如果return false, 那么将取消本次操作
return false;
});
//以下两种方式则配置所有的多选select
formSelects.on(function(id, vals, val, isAdd, isDisabled){
...
});
formSelects.on(null, function(id, vals, val, isAdd, isDisabled){
...
});
//4.0.0.0813版本之前, 受到了颇多的小伙伴吐槽, 此版本加上了获取实时数据的方法
formSelects.on('select1', function(id, vals, val, isAdd, isDisabled){
//id: 点击select的id
//vals: 当前select已选中的值
//val: 当前select点击的值
//isAdd: 当前操作选中or取消
//isDisabled: 当前选项是否是disabled
}, true);
8. 禁用多选。
var formSelects = layui.formSelects;
formSelects.disabled('select1');
//以下方式则禁用所有的已存在多选
formSelects.disabled();
/**
* 1.启用多选, 启用被禁用的多选
*
* formSelects.undisabled(ID);
*
* @param ID xm-select的值
*/
var formSelects = layui.formSelects;
formSelects.undisabled('select1');
//以下方式则启用所有的已存在多选
formSelects.undisabled();
-->
</body>
</html>
最后编辑：2025年01月14日
©著作权归作者所有
最新回复