Rumah > hujung hadapan web > tutorial js > 基于layui如何实现无限极联选择器(附代码)

基于layui如何实现无限极联选择器(附代码)

不言
Lepaskan: 2018-08-25 15:49:35
asal
3268 orang telah melayarinya

本篇文章给大家带来的内容是关于基于layui如何实现无限极联选择器(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

html元素

<div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-block">
        <input type="text" id="a" class="layui-input" readonly="readonly">
    </div>
</div>
Salin selepas log masuk

js引用

layui.use([&#39;form&#39;,"jquery","cascader"], function(){
    var $ = layui.jquery;
    var cascader = layui.cascader;
    
    var data = [
        {
            value: &#39;A&#39;,
            label: &#39;a&#39;,
            children: [
                {
                    value: &#39;AA1&#39;,
                    label: &#39;aa1&#39;,
                },
                {
                    value: &#39;BB1&#39;,
                    label: &#39;bb1&#39;
                }
            ]
        },
        {
            value: &#39;B&#39;,
            label: &#39;b&#39;,
        }
    ]
    cascader({
        elem: "#a",
        data: data,
        // url: "/aa",
        // type: "post",
        // triggerType: "change",
        // showLastLevels: true,
        // where: {
        //     a: "aaa"
        // },
        value: ["A", "AA1"],
        success: function (data) {
            console.log(data);
        }
    });
});
Salin selepas log masuk

cascader参数说明

1、elem:input容器
2、data:需要的静态数据,类型为数组,
3、url:异步获取的数据,类型为数组,(data与url两个参数二选一)
4、type:异步获取的方式,默认get,可省略
5、where:异步传入的参数,可省略
6、triggerType:触发方式,不填或其他都为click,可选参数"change",即鼠标移入触发
7、showLastLevels:输入框是否只显示最后一级,默认false,即全显示
8、value:传入的初始值,类型为数组,值为data的value值
9、success:回调函数,选择完成之后的回调函数,返回值为value数组

在线demo
github源码

相关推荐:

layui的项目优化以及无侵入优化的详细解析

layui form表单的动态渲染与vue.js之间的冲突解决方法(附代码)

Atas ialah kandungan terperinci 基于layui如何实现无限极联选择器(附代码). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan