layui下拉,一级二级三级,多级联动,

最新推荐文章于 2023-08-25 22:22:24 发布

李泽举

最新推荐文章于 2023-08-25 22:22:24 发布

阅读量2.7k

点赞数 1

分类专栏：前端踩坑合集

本文链接：https://blog.csdn.net/weixin_45895806/article/details/109075422

版权

前端踩坑合集专栏收录该内容

99 篇文章 44 订阅

订阅专栏

省市县三级地图,三个select联动效果

基于layui实现的省市县区三级联动下拉选择器

关于layui

这里不做介绍，直戳我阅读

关于本省市区级联下拉选择器

本选择器已经将它封装成一个layui的插件，使用起来非常方便，支持一个页面中使用多个省市区选择器，并且支持选择结果回调，支持自定义lay-filter。

使用方法以及一些约定

html部分
整个选择器需要使用一个父标签包裹，如下使用了id=“area-picker”，并且分别给省、市、区的select加上province-selector、city-selector、county-selector，用来区分对应的内容标签，这里也可以自定义lay-filter，当一个页面有多个省市区选择器的时候，需要每组lay-filter命名不一样，因此，最好的方式是，不手动设置lay-filter。每个select可以指定初始值，在select上写data-value=""即可。初始值也可以通过js设置。


```javascript
<div class="layui-form-item" id="area-picker">
            <div class="layui-form-label">网点地址</div>
            <div class="layui-input-inline" style="width: 200px;">
              <select name="province" class="province-selector" data-value="广东省" lay-filter="province-1">
                <option value="">请选择省</option>
              </select>
            </div>
            <div class="layui-input-inline" style="width: 200px;">
              <select name="city" class="city-selector" data-value="深圳市" lay-filter="city-1">
                <option value="">请选择市</option>
              </select>
            </div>
            <div class="layui-input-inline" style="width: 200px;">
              <select name="county" class="county-selector" data-value="龙岗区" lay-filter="county-1">
                <option value="">请选择区</option>
              </select>
            </div>
          </div>

2.js部分
引入layarea, 根据指定选择器渲染标签

//配置插件目录
layui.config({
    base: './mods/'
    , version: '1.0'
});

layui.use(['layer', 'form', 'layarea'], function () {
    var layer = layui.layer
        , form = layui.form
        , layarea = layui.layarea;

    layarea.render({
        elem: '#area-picker',
        // data: {
        //     province: '广东省',
        //     city: '深圳市',
        //     county: '龙岗区',
        // },
        change: function (res) {
            //选择结果
            console.log(res);
        }
    });
});

DEMO下载地址
省市县区三级联动下拉
.
.
.

单个下拉框实现多级联动效果
附DEMO一篇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="keywords" content="hsiangleev,layui扩展">
    <title>layui扩展无限级联选择器</title>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <link rel="stylesheet" href="cascader.css" media="all">
    <link rel="icon" type="image/png" sizes="32x32" href="../favicon.ico">
</head>
<body>
    <button class="layui-btn">reload</button>
    <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>
    
    

    <script src="../layui/layui.js"></script>
    <script>
        layui.config({
            base: "../layui/lay/mymodules/"
        }).use(['form',"jquery","cascader","form"], function(){
            var $ = layui.jquery;
            var cascader = layui.cascader;
            
            var data = [
                {
                    value: 'A',
                    label: 'a',
                    children: [
                        {
                            value: 'AA1',
                            label: 'aa1',
                        },
                        {
                            value: 'BB1',
                            label: 'bb1'
                        }
                    ]
                },
                {
                    value: 'B',
                    label: 'b',
                    children: [
                        {
                            value: 'AA2',
                            label: 'aa2',
                            children: [
                                {
                                    value: 'AAA3',
                                    label: 'aaa3',
                                    children: [
                                        {
                                            value: 'AAA3',
                                            label: 'aaa3',
                                            children: [
                                                {
                                                    value: 'AAA3',
                                                    label: 'aaa3',
                                                },
                                                {
                                                    value: 'BBB3',
                                                    label: 'bbb3'
                                                }
                                            ]
                                        }
                                    ]
                                },
                                {
                                    value: 'BBB3',
                                    label: 'bbb3'
                                }
                            ]
                        },
                        {
                            value: 'BB2',
                            label: 'bb2',
                            children: [
                                {
                                    value: 'AAA4',
                                    label: 'aaa4',
                                },
                                {
                                    value: 'BBB4',
                                    label: 'bbb4'
                                }
                            ]
                        }
                    ]
                },
                {
                    value: 'C',
                    label: 'c',
                }
            ]
            var cas=cascader({
                elem: "#a",
                data: data,
                // url: "/aa",
                // type: "post",
                // triggerType: "change",
                showLastLevels: true,
                // where: {
                //     a: "aaa"
                // },
                value: ["B", "BB2", "BBB4"],
                // changeOnSelect: true,
                success: function (valData,labelData) {
                    console.log(valData,labelData);
                    // 选择后的值要想与data里的数据绑定,直接在此绑定,
                    // 如: this.XX = valData;
                    // 不要去html中 v-model 因为添加了v-model,级联选择器选择联动后,
                    // 在其他input输入内容的时候,级联的内容会置空, 而且不能双向绑定数据
                }
            });

            var reloadData=[
                {
                    value: 'A',
                    label: 'a',
                    children: [
                        {
                            value: 'AA1',
                            label: 'aa1',
                        },
                        {
                            value: 'BB1',
                            label: 'bb1'
                        }
                    ]
                }
            ]
            $(".layui-btn").on("click",function() {
                cas.reload({
                    data: reloadData,
                    value:['A','BB1']
                })
            })
            
        });
    </script>
        
</body>
</html>

DEMO下载地址
单个下拉框实现多级联动效果

李泽举

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
2
评论
layui下拉,一级二级三级,多级联动,

省市县三级地图,三个select联动效果基于layui实现的省市县区三级联动下拉选择器关于layui这里不做介绍，直戳我阅读关于本省市区级联下拉选择器本选择器已经将它封装成一个layui的插件，使用起来非常方便，支持一个页面中使用多个省市区选择器，并且支持选择结果回调，支持自定义lay-filter。使用方法以及一些约定html部分整个选择器需要使用一个父标签包裹，如下使用了id=“area-picker”，并且分别给省、市、区的select加上province-selector、city
复制链接

扫一扫