formSelects-v4.js 基于Layui的select多选

最新推荐文章于 2024-03-15 11:32:30 发布

Charge8

最新推荐文章于 2024-03-15 11:32:30 发布

阅读量3.7k

点赞数 2

分类专栏： Layui 文章标签： formSelects-v4.js 基于Layui的sele

本文链接：https://blog.csdn.net/qq_42402854/article/details/95457148

版权

Layui 专栏收录该内容

7 篇文章 4 订阅

订阅专栏

formSelects-v4.js下载地址：https://github.com/hnzzmsf/layui-formSelects

formSelects-v4.js 使用文档：https://hnzzmsf.github.io/example/example_v4.html

基于 layui 的 select 多选解决方案。支持：多选、分组、取值&赋值、选择监听、搜索、启用&禁用、多选皮肤、重复选、下拉方向、显示数量、选择数、远程搜索、动态数据、动态创建、搜索过滤、快捷操作、选项模板、多级联动等。

一、非模块化使用

引入 css 和 js 即可 , Layui 使用非模块化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>使用layui</title>
    <link rel="stylesheet" href="./static/layui2.5.4/css/layui.css"  type="text/css">
    <link rel="stylesheet" href="./static/layui2.5.4/formSelects-v4.css"  type="text/css">
</head>
<body>
<br/>
<br/>
<div class="layui-container">
    <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="text" name="password" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" >多选选择框</label>
            <div class="layui-input-block">
                <select name="city" lay-search lay-verify="required" lay-filter="citySelect" xm-select="cityXmSelect" xm-select-search>
                    <option value="">请选择一个城市，可搜索</option>
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="杭州">杭州</option>
                    <option value="西安">西安</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
</body>
<script type="text/javascript" src="./static/jquery/jquery-3.3.1.js"></script><!-- 可加自己的jquery -->
<script type="text/javascript" src="./static/layui2.5.4/layui.all.js"></script><!-- 非模块化 -->
<script type="text/javascript" src="./static/layui2.5.4/formSelects-v4.js"></script>
<script>
    var formSelects = layui.formSelects;
    var arr = ['北京', '杭州'];
    formSelects.value('cityXmSelect', arr); // 设置select的选中值

    //监听提交
    layui.form.on('submit(formDemo)', function(data){
        layer.msg(JSON.stringify(data.field));
        return false;
    });
</script>
</html>

二、模块化使用

   <script type="text/javascript" src="./static/layui2.5.4/layui.js"></script><!-- Layui使用模块化 -->

引入formSelects-v4.css，不引入formSelects-v4.js，通过使用扩展模块全局引入js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>使用layui</title>
    <link rel="stylesheet" href="./static/layui2.5.4/css/layui.css"  type="text/css">
    <link rel="stylesheet" href="static/layui2.5.4/formSelects-v4.css" type="text/css">
</head>
<body>
<br/>
<br/>
<div class="layui-container">
    <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="text" name="password" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" >多选选择框</label>
            <div class="layui-input-block">
                <select name="city" lay-search lay-verify="required" lay-filter="citySelect" xm-select="cityXmSelect" xm-select-search>
                    <option value="">请选择一个城市，可搜索</option>
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="杭州">杭州</option>
                    <option value="西安">西安</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
</body>
<script type="text/javascript" src="./static/jquery/jquery-3.3.1.js"></script><!-- 可加自己的jquery -->
<script type="text/javascript" src="./static/layui2.5.4/layui.js"></script><!-- 非模块化 -->
<script>
    //全局定义一次, 加载formSelects
    layui.config({
        base: './static/layui2.5.4/' //设定扩展模块所在的目录, 可以使用绝对路径
    }).extend({  //设定模块别名
        formSelects: 'formSelects-v4'
    });
    //加载模块
    layui.use(['layer', 'form','jquery','formSelects'], function(){
        var layer = layui.layer
            ,form = layui.form;
        var $ = layui.$;  //使用自己引入的jQuery版本,后面跟平时使用一样
        var formSelects = layui.formSelects;

        var arr = ['北京', '西安'];
        formSelects.value('cityXmSelect', arr); // 设置select的选中值
        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
</script>
</html>

三 formSelects-v4.js 属性

基本参数

属性名	说明	示例
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", 超出后隐藏

基本方法

多参考官方文档，基本使用 OK

ends~

Charge8

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
formSelects-v4.js 基于Layui的select多选

formSelects-v4.js下载地址：https://github.com/hnzzmsf/layui-formSelectsformSelects-v4.js 使用文档：https://hnzzmsf.github.io/example/example_v4.html 基于 layui 的 select 多选解决方案。支持：多选、分组、取值&赋值、选择监听、搜索、...
复制链接

扫一扫