基于 Layui 的 select 多选解决方案 formSelects

码农软件 · 软件分类 · 网页组件 · 2019-04-08 14:42:59

软件介绍

formSelects-v4.js 基于Layui的多选解决方案

使用方式

//1.下载formSelects-v4.1
 
//2.模块化使用
<script src="layui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    //全局定义一次, 加载formSelects
    layui.config({
        base: '../src/' //此处路径请自行处理, 可以使用绝对路径
    }).extend({
        formSelects: 'formSelects-v4'
    });
    //加载模块
    layui.use(['formSelects'], function(){
        var formSelects = layui.formSelects;
         
    });
</script>
 
//3.非模块化使用
<script src="layui.all.js" type="text/javascript" charset="utf-8"></script>
<script src="formSelects-v4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var formSelects = layui.formSelects;
     
</script>

基本参数

属性名说明示例
xm-select多选核心, 标记不同的多选, 多选IDxm-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-height标记select高度是否固定xm-select-height="36px", 高度不再随数据变化而变化
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", 超出后隐藏

效果图

本文地址:https://www.codercto.com/soft/d/3135.html

The Creative Curve

The Creative Curve

Allen Gannett / Knopf Doubleday Publishing Group / 2018-6-12

Big data entrepreneur Allen Gannett overturns the mythology around creative genius, and reveals the science and secrets behind achieving breakout commercial success in any field. We have been s......一起来看看 《The Creative Curve》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换