<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!-- layui css -->
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" />
<!-- layui js -->
<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
<!-- 下載地址 https://gitee.com/maplemei/xm-select/attach_files/591517/download/xm-select-v1.2.2.zip -->
<script src="https://maplemei.gitee.io/xm-select/xm-select.js" type="text/javascript" charset="utf-8"></script>
</head>
<body style="min-height: 1000px;">
<div class="layui-container">
<!-- 拷貝整個.layui-card 即可 -->
<div class="layui-card" id="userinfo">
<div class="layui-card-header">下拉框多選:默認選中,遠程搜索等常用參數</div>
<div class="layui-card-body">
<form class="layui-form" action="" lay-filter="info">
<div class="layui-form-item">
<div class="layui-input-inline">
<input type="text" name="username" lay-verify="usernameV" placeholder="請輸入"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div id="demo1"></div>
</div>
<div class="layui-form-item">
<button type="submit" class="layui-btn tt" lay-submit="" lay-filter="demo1">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</form>
<script>
layui.use(['jquery', 'form', 'laydate'], function() {
var $ = layui.$;
var form = layui.form,
layer = layui.layer;
form.verify({
usernameV: function(value) {
//如果有填寫值,就驗證,不填寫 不驗證
if (value && value.length < 2) {
return '標題至少得2個字符啊';
}
},
});
//如果需要使用原始保單提交方式(刷新整個頁面)
//請注釋掉下方 監聽表單的 代碼
form.on('submit(demo1)', function(data) {
//打印表單數據
alert(JSON.stringify(data.field))
layer.alert("提交成功;如果需要使用原始保單提交方式,請注釋掉本段代碼", {
title: '提示'
});
//ajax操作等
// some code
return false;//阻止默認表單提交行為
});
});
var options = {
el: '#demo1',
name: 'xmselectName',//表單的name屬性
layVerify: 'required',//必填項
//layVerType: 'tips',//提示類型 同layui
tips: '你喜歡什么水果呢?傻瓜教程',
toolbar: {//工具條,全選,清空,反選,自定義
show: true,
list: [
'ALL',
'CLEAR',
'REVERSE',
{
name: '自定義',
icon: 'el-icon-star-off',
method(data){
alert('我是自定義的');
}
}
]
},
data: [],
//initValue: ['shuiguo','shucai'],//默認初始化,也可以數據中selected屬性
//language: 'zn',//語言包
//filterable: true,//搜索功能
//autoRow: true,//選項過多,自動換行
// repeat: true,//是否支持重復選擇
//max: 2,//最多選擇2個
// template({ item, sels, name, value }){
// //template:自定義下拉框的模板
// return item.name + '<span style="position: absolute; right: 10px; color: #8799a3">'+value+'</span>'
// },
};
var demo1 = xmSelect.render(options)
setTimeout(function(){
//假設data是ajax 異步獲取的
var data =[
//selected屬性可以初始化下拉框
//{name: '水果', value:'shuiguo',selected:true, disabled: true},
{name: '水果', value:'shuiguo',disabled: true},
{name: '蔬菜', value: 'shucai'},
{name: '桌子', value: 'zhuozi'},
{name: '北京', value: 'beijing'},
];
//模擬通過ajax 獲取json數據,異步更新多選下拉框的值
demo1.update({data: data})
},100);
</script>
</div>
</div>
</div>
</body>
</html>
用layui實現下拉復選框
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。