基于jQuery的省市县三级联动菜单

jQuery 专栏收录该内容
4 篇文章 0 订阅

在生活中,我们时常会填写个人信息表等类似的表,里面通常有你的籍贯、户籍所在地等地址填写内容。大致就是让你填,你家在某某省某某市某某县。在网络中,我们填写时,基本上都是在网页上出现三个并排下拉框,由省至县依次选择。今天给大家介绍一版基于jQuery的省市县三级联动菜单。
在这里插入图片描述
说到这,大家自然会想到某某省有某某市有某某县,很好。但大家是否有建立对应的数据代码呢?

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

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

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

有了数据代码后,就应该建立思路代码了。
在这里插入图片描述

大致分析一下,有以下功能需要实现:

  • 每一级框中,应该有自己写的对应的省市县数据;
  • 当未选择时,框内字样应为“请选择”;
  • 当省已选择时,后面的市县自然应为该省范围内;
  • 当省已选择并再次更改后,后面的市县自然应为新的省的范围内。市县未选择时,框内字样应为“请选择”;
  • 同理,当市已选择并再次更改后,后面的县自然应为新的市的范围内。县未选择时,框内字样应为“请选择”。

数据收集完毕,思路整理完毕。那么,大家是否小手按耐不住了呢?
在这里插入图片描述

<!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">

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

代码仅供参考,相信大家已经写出自己的代码了呢!
在这里插入图片描述

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值