jQuery的数组版地址三级联动

最新推荐文章于 2024-07-21 02:56:05 发布

........千年老妖

最新推荐文章于 2024-07-21 02:56:05 发布

阅读量513

点赞数

分类专栏：知识点分析文章标签： jQuery的数组版地址三级联动地址三级联动

本文链接：https://blog.csdn.net/qq_36760873/article/details/102166049

版权

本文介绍了jQuery的数组版地址三级联动原理，通过遍历数组实现选择省、市、区的联动效果。当选择任意级别时，后续级别会根据选择自动更新。同时提供了地区数组的示例，并预告了使用ajax和redis的数据库版联动实现。

摘要由CSDN通过智能技术生成

jQuery的数组版地址三级联动原理

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

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

        });*/

       $(function(){
   
           $(provinces).each(function(i,o){
   
               var str = "<option value=\""+i+"\">"+o+"</option>";
               $('#province').append(str);

           });

           $('#province').on('change',function()