原生JS用select标签实现三级联动

最新推荐文章于 2021-03-03 16:25:40 发布

杜沫

最新推荐文章于 2021-03-03 16:25:40 发布

阅读量692

点赞数 3

文章标签： javascript css html5 css3 es6

本文链接：https://blog.csdn.net/qq_36091461/article/details/105333684

版权

三级联动思想与二级联动的一样，添加省与市的过程我就不写了，参考原生JS用select标签实现二级联动，就说一下如何添加区

对于区的数组设置，我们需要一个二维数组，拿数组中下标为0的值来说，从整体上来说，下标为0 的数是一个数组。里面存放的是一个市所包括的所有区的值，不同市所包括的区的值分别放在不同的下标中，

实现思路
1、第一个下标代表的是选择的哪个省
2、第二个下标代表的是选择的哪个市
因此我们在点击省的时候，需要将当前的下标记录在一个全局变量中，在点市的时候，直接获取当前值，两者结合起来就会实现区的动态添加

函数封装
因为动态添加市与区的值是一样的，所以需要封装一个函数，减少代码冗余，但是这个封装不太好写，因为是点击省才有市，点击市才有区，是一层嵌套一层，所在封装一时候，需要判断当前的父节点是省还是市。省的话，当前的下标记录在一个全局变量中，再动态添加市。如果是市，用全局变量加当前点击的下标再动态添加区

代码区

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三级联动 </title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        .clear::after{
            content: "";
            display: block;
            clear: both;
        }
        .box{
           margin: 100px auto;
           width:  720px;
        }
        .left,.right,.last{
            width: 32%;
            float: left;
        }
        .left{
            margin-right: 2px;
        }
        .name,.content{
            height: 30px;
            float: left;
        }
        .name{
            width: 30%;
            line-height: 30px;
            text-align: center;
            margin-right: 1px;
            background-color: yellowgreen;
        }
        .content{
            width: 69%;
        }
        select{
            width: 100%;
            height: 100%;
        }
      
    </style>
</head>
<body>
     <div class="box clear">
        <div class="left clear">
            <div class='name'>省：</div>
            <div class="content"><select class="province" id=""></select></div>
        </div>
        <div class="right clear">
            <div class='name'>市</div>
            <div class="content"><select class=" city" id=""></select></div>
        </div>
        <div class="last clear">

最低0.47元/天解锁文章

杜沫

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
原生JS用select标签实现三级联动

三级联动思想与二级联动的一样，添加省与市的过程我就不写了，参考原生JS用select标签实现二级联动，就说一下如何添加区对于区的数组设置，我们需要一个二维数组，拿数组中下标为0的值来说，从整体上来说，下标为0 的数是一个数组。里面存放的是一个市所包括的所有区的值，不同市所包括的区的值分别放在不同的下标中，实现思路1、第一个下标代表的是选择的哪个省2、第二个下标代表的是选择的哪个市因此我...
复制链接

扫一扫