三址级联

最新推荐文章于 2023-12-18 10:06:46 发布

我是一枚小白

最新推荐文章于 2023-12-18 10:06:46 发布

阅读量133

点赞数

分类专栏： web前端文章标签： jQuery js

本文链接：https://blog.csdn.net/qq_45473292/article/details/101479200

版权

web前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在写三址联动时，就会想到，该怎么处理数据，能去选择省，第二个可以把市下面的县显示出来。
对于数据：我们希望的数据是怎样的，方便我们操作。省、市、县三级联动，数据是超级相关联的，我们不能单独存数据。所以数据用数组对象，一级一级的拿到数据。
对于页面：将标签中的内容作为标签的滚动列表中显示内容。

    <select name="" id="province">
        <option value="">请选择</option>
    </select>省
    <select name="" id="city">
        <option value="">请选择</option>
    </select>市
    <select name="" id="area">
        <option value="">请选择</option>
    </select>县

数据解决的方法，使用数组进行关联

var provinces =['山西','山东','河南','河北'];

var cities = [
    ['太原','晋中','大同','阳泉'],
    ['济南','青岛','威海'],
    ['郑州','洛阳'],
    ['石家庄','保定']
];

var areas = [
    [
        ['小店','迎泽','杏花岭','尖草坪'],
        ['榆次','左权','寿阳'],
        ['左云'],
        ['平定','盂县']
    ],
    [
        ['济南地区1','济南地区2'],
        ['青岛地区1','青岛地区2'],
        ['威海地区1','威海地区2'],
    ],
    [
        ['郑州地区1','郑州地区2'],
        ['洛阳地区1','洛阳地区2'],
    ],
    [
        ['石家庄地区1','石家庄地区2'],
        ['保定地区1','保定地区2'],
    ],
]

由于不知道市下面的县有哪些，就用地区表示
定义是成数组（个人小思路，如果错误请指出来谢谢）
比如：山西的下标为 0 ；再找下级市的时候对于 cities 数组太原一列的数组下标也为 0 ，就将其展示出来，再找下级县的的时候，小店一列的数组下标也为 0；就会将其展示出来这就解决了数据找不到的问题
页面进行展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
    <script src="js/data.js" type="text/javascript"></script>

    <script type="text/javascript">

       /* $(document).ready(function(){

        });*/

       $(function(){

    //将provinces转换成 jQuery 对象  调用 each方法进行遍历
           $(provinces).each(function(i,o){
             // 对其进行拼接  追加到后面
               var str = "<option value=\""+i+"\">"+o+"</option>";
               $('#province').append(str);

           });

           $('#province').on('change',function(){
               pIndex = $('#province').find(':selected').attr('value')

              //在重新选择省的时候，清除之前的被选择的区数据,如果在选择省的时候只调用这个方法时，
                //可以采取将三级区数据清空，这样三级选择框就不会出现，否则会出现省市变化了区未变的情况
               $('#city').empty().append("<option value=\"\">请选择</option>");
               $('#area').empty().append("<option value=\"\">请选择</option>");

               //pIndex 取到下标的值
               $(cities[pIndex]).each(function(i,o){
                   var str = "<option value=\""+i+"\">"+o+"</option>";
                   $('#city').append(str);
               });

           })

           $('#city').on('change',function(){
               cIndex = $('#city').find(':selected').attr('value');

               $('#area').empty().append("<option value=\"\">请选择</option>");
               $(areas[pIndex][cIndex]).each(function(i,o){
                   var str = "<option value=\""+i+"\">"+o+"</option>";
                   $('#area').append(str);
               });
           });
       });

    </script>
</head>
<body>

    <select name="" id="province">
        <option value="">请选择</option>
    </select>省
    <select name="" id="city">
        <option value="">请选择</option>
    </select>市
    <select name="" id="area">
        <option value="">请选择</option>
    </select>县

</body>
</html>

将jquery包引入进来

<script src="js/jquery-3.4.1.js" type="text/javascript"></script>

再把外面数据的引入进来

 <script src="js/data.js" type="text/javascript"></script>

这就是一个小的三址级联

我是一枚小白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三址级联

在写三址联动时，就会想到，该怎么处理数据，能去选择省，第二个可以把市下面的县显示出来。对于数据：我们希望的数据是怎样的，方便我们操作。省、市、县三级联动，数据是超级相关联的，我们不能单独存数据。所以数据用数组对象，一级一级的拿到数据。对于页面：将标签中的内容作为标签的滚动列表中显示内容。 <select name="" id="province"> ...
复制链接

扫一扫