xm-select实现layui带工具栏下拉多选效果代码
代码语言：html
所属分类：表单美化
代码描述：xm-select实现layui带工具栏下拉多选效果代码
代码标签： xm-select layui 工具栏 下拉 多选
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!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 type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/layui/css/layui.css">
<!-- layui js -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/layui/layui.all.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/xm-select.js"></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;//阻止默认表单提交行为
});
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0