jQuery技术实现地址级联

最新推荐文章于 2024-08-07 14:32:08 发布

hqzl

最新推荐文章于 2024-08-07 14:32:08 发布

阅读量497

点赞数 1

本文链接：https://blog.youkuaiyun.com/weixin_44864446/article/details/101381207

版权

jQuery技术实现地址级联（三级联动）

思路：对下拉选项省、市、县分别作处理，实现省市县间的关联。
采用数组的形式表明层级关系。
一维数组放市
二维数组放省
三维数组放县

在data.js文件中作数组操作
主要代码实例如下：

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

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

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

在html文件中实现具体操作，在利用jQuery技术时务必要记得导入jquery.js的插件。

主要进行的操作是对数组的遍历，通过下标拿到元素，继续进行遍历，拼接操作，清空操作。

<!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).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>");

               $(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>