Layui联动选择框实现七大地理区/省/市三级联动

最新推荐文章于 2025-03-11 10:48:16 发布

xxxPHP_er

最新推荐文章于 2025-03-11 10:48:16 发布

阅读量2.4k

点赞数 13

分类专栏： layui js 文章标签： layui 前端 javascript

本文链接：https://blog.youkuaiyun.com/xxxPHP_er/article/details/136622892

版权

js 同时被 2 个专栏收录

3 篇文章

订阅专栏

layui

2 篇文章

订阅专栏

一、背景

最近在开发的项目时，要求实现中国七大区与省市的联动选择，在网上找了一圈的插件，全都是省市区的三级联动，于是就通过layui简单的写了一个。

二、实现步骤

layui联动选择框的实现主要涉及到监听select的change事件，并根据选择的值异步加载新的内容，然后重新渲染选择框。

1.创建html结构：首先，你需要在HTML中创建联动选择框的结构。这通常包括多个<select>元素，每个元素对应一个联动层级。

2.初始化layui表单：使用layui的表单模块来初始化你的选择框。

3.监听change事件：为每个<select>元素添加change事件的监听器。当用户选择一个选项时，这个事件会被触发。

4.加载内容：在change事件的处理函数中，根据用户选择的值加载新的内容。

5.重新渲染选择框：一旦新的数据被加载，你需要使用这些数据来更新下一个联动层级的<select>元素的内容，并重新渲染它。

三、代码实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__STATIC__/layuiminiv2/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="__STATIC__/layuiminiv2/css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form">
    <div class="layui-form-item">  
        <label class="layui-form-label">联动选择框</label>  
        <div class="layui-input-inline">  
            <select name="level1" lay-filter="level1-filter" id="level1">  
                <option value="">请选择level1</option>
                <option value="华北">华北</option>
                <option value="东北">东北</option>
                <option value="华东">华东</option>
                <option value="华中">华中</option>
                <option value="华南">华南</option>
                <option value="西南">西南</option>
                <option value="西北">西北</option>
                <option value="国外">国外</option>
                <!-- 初始选项 -->  
            </select>  
        </div>  
        <div class="layui-input-inline">  
            <select name="level2" lay-filter="level2-filter">  
            <option value="">请选择level2</option>  
            <!-- 根据level1的选择动态加载的选项 -->  
            </select>  
        </div>  
        <div class="layui-input-inline">  
            <select name="level3" lay-filter="level3-filter">  
            <option value="">请选择level3</option>  
            <!-- 根据level2的选择动态加载的选项 -->  
            </select>  
        </div>  
        <!-- 更多的联动层级（如果需要） -->  
    </div>  
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>
<script src="__STATIC__/layuiminiv2/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="__STATIC__/js/city.js" charset="utf-8"></script>
<script>
    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            console.log(data.field);
        });

        // 监听level1的change事件  
        form.on('select(level1-filter)', function(data){  
            var value = data.value; // 获取选中的值 
            // console.log(value); // 打印选中的值
            var keys = Object.keys(area_city[value])

            var html = ''; 
            var html2 = '';
            $.each(keys, function(index, item){  
                html += '<option value="'+ item +'">'+ item +'</option>';
                if(index == 0){
                    html2 += '<option value="'+ area_city[value][item][0] +'">'+ area_city[value][item][0] +'</option>';
                }
            });  
            // 更新level2、level3的选择框并重新渲染  
            $('select[name="level2"]').html(html);
            $('select[name="level3"]').html(html2);    
            form.render('select');  
        });

        // 监听level2的change事件  
        form.on('select(level2-filter)', function(data){  
            var value = data.value; // 获取选中的值 
            var level1 = $("#level1").val();
            var keys = area_city[level1][value]

            var html = '';  
            $.each(keys, function(index, item){  
                html += '<option value="'+ item +'">'+ item +'</option>';  
            });  
            // 更新level3的选择框并重新渲染  
            $('select[name="level3"]').html(html);  
            form.render('select');  
        });  
    });
</script>
</body>
</html>