地址四级联动

最新推荐文章于 2024-08-09 15:19:32 发布
最新推荐文章于 2024-08-09 15:19:32 发布
阅读量263 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/wangyang0210/p/9639376.html
版权

直接代码

https://github.com/king-y/jQuery/tree/master/extend/address

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./jquery-1.8.3.min.js"></script>
</head>
<body>
    <select id="province">
        <option value="">-请选择-</option>
    </select>
    <select id="city">
        <option value="">-请选择-</option>
    </select>
    <select id="area">
        <option value="">-请选择-</option>
    </select>
    <select id="town">
        <option value="">-请选择-</option>
    </select>
    <script>

            //省/直辖市
            $('#province').click(function(){
                $.ajax({
                    type : 'get',
                    url : './1.php',
                    data : 'level=1',
                    dataType:'json',
                    success : function(data) {
                        for (var i = 0; i < data.length; i++) {
                            $('<option value='+data[i]['id']+'>'+data[i]['name']+'</option>').appendTo($('#province'));
                        }
                    },
                    error : function() {
                        alert('AJAX执行失败');
                    }
                });
            });



            //市/区
            $('#province').change(function(){
                //获取id
                var i= $('#province').val();
                $.ajax({
                        type : 'get',
                        url : './2.php',
                        data : {'upid':i},
                        dataType:'json',
                        success : function(data) {
                                $('#city option').remove('option');
                                for (var i = 0; i <data.length; i++) {
                                     $('<option value='+data[i]['id']+'>'+data[i]['name']+'</option>').appendTo($('#city'));
                                }
                        },
                        error : function() {
                            alert('AJAX执行失败');
                        }
                });
                $('#area').css('display','none');
                $('#town').css('display','none');
            });

            //区/县
            $('#city').change(function() {
                var n = $('#city').val();
                $.ajax({
                        type : 'get',
                        url : './3.php',
                        data : {'upid':n},
                        dataType:'json',
                        success : function(data) {
                            if (data!='') {
                                $('#area').show();
                                $('#town').hide();
                                $('#area option').remove('option');
                                for (var i = 0; i <data.length; i++) {
                                     $('<option value='+data[i]['id']+'>'+data[i]['name']+'</option>').appendTo($('#area'));
                                }
                            }else{
                                $('#area').css('display','none');
                                $('#town').css('display','none');
                            }
                        },
                        error : function() {
                            alert('AJAX执行失败');
                        }
                });
            });

            //城镇/街道
             $('#area').change(function() {
                var m = $('#area').val();
                $.ajax({
                        type : 'get',
                        url : './4.php',
                        data : {'upid':m},
                        dataType:'json',
                        success : function(data) {
                            if (data!='') {
                                $('#town').css('display','');
                                $('#town option').remove('option');
                                for (var i = 0; i <data.length; i++) {
                                     $('<option value='+data[i]['id']+'>'+data[i]['name']+'</option>').appendTo($('#town'));
                                }
                            }else{
                                  $('#town').css('display','none');
                            }
                        },
                        error : function() {
                            alert('AJAX执行失败');
                        }
                });
            });

    </script>
</body>
</html>

 

转载于:https://www.cnblogs.com/wangyang0210/p/9639376.html

weixin_30847865
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
四级联动地址
08-07
全国省市区四级地址 文件含义 文件名称 省份数据 provinces.json 城市数据 cities.json 区县数据 areas.json 乡镇（街道）数据 streets.json “省份、城市” 二级联动数据 pc.json “省份、城市” 二级联动数据（带编码） pc-code.json “省份、城市、区县” 三级联动数据 pca.json “省份、城市、区县” 三级联动数据（带编码） pca-code.json “省份、城市、区县、乡镇” 四级联动数据 pcas.json “省份、城市、区县、乡镇” 四级联动数据（带编码）
适应移动端的地址四级(省市区街道)联动选择
06-13
jQuery四级联动插件制作json调用省市区街道收货地址选择代码。适用于手机端商城收货地址填写修改。ps：通过ajax数据异步获取，部分调用json文件外部引用。
省市区街道4级联动地址.xlsx
04-28
省市区街道4级联动地址，Excel文档格式 格式如： 北京市 北京市 东城区 东华门街道 北京市 北京市 东城区 景山街道 北京市 北京市 东城区 交道口街道 北京市 北京市 东城区 安定门街道 北京市 北京市 东城区 北新桥街道 陕西省 西安市 蓝田县 灞源乡 陕西省 西安市 蓝田县 孟村乡 陕西省 西安市 蓝田县 安村乡 陕西省 西安市 蓝田县 史家寨乡 陕西省 西安市 蓝田县 小寨乡
地址三级联动
baidu_36583119的博客
09-13 2140
html代码： &lt;tr&gt; &lt;td&gt;现居住地：&lt;/td&gt; &lt;td&gt; 省份： &lt;select id="province" name="province" onchange="showCity()"&gt; &lt;/sel
地址五级联动
qq_39493425的博客
05-25 2508
html代码&lt;div class="panel_content" id="search_list"&gt; &lt;table class="form_table" cellpadding="0" cellspacing="0"&gt; &lt;tbody&gt;
地址四级联动地址四级联动
07-04
在IT行业中，地址四级联动是一种常见的前端交互设计，主要用于提高用户在输入地址时的便捷性和准确性。这种设计通常应用于电商、物流、地图等需要详细地址信息的系统中。"地址四级联动"指的是省、市、区（县）及街道...
地址四级联动选择器
03-28
在IT行业中，地址四级联动选择器是一种常见的交互设计，尤其在电商、物流等需要精确到省市区县的应用中。这个组件通常由四个级别组成：国家、省份、城市和区县，用户通过逐级选择来确定具体地址。在这个压缩包文件中...
ry配送地址四级联动代码.rar_clubkkd_pathbka_ry配送地址四级联动代码
09-24
标题提到的“ry配送地址四级联动代码”是一个专门针对配送地址选择的JavaScript实现，利用jQuery库来创建这种交互效果。 首先，我们要理解“四级联动”的概念。它指的是四个层次的数据关联，如省份、城市、区县和...
四级地址库-国家标准的行政区划代码（省市区）-附加街道
12-16
四级地址库-国家标准的行政区划代码（省市区）-附加街道，共48082条数据。是mysql的SQL，下载解压后，直接运行，会自动建表、并导入数据，有层级关系。表结构设计合理；去除了空的“市辖区”；北京、上海、天津、重庆等直辖市的处理，以北京为例：北京——北京市——东城区——东华门街道，其他省的层级（以河北为例）：河北——石家庄市——长安区——建北街道。
前端四级联动插件
04-13
淘宝省市四级地址完整sql和对应的前端四级联动插件
全球行政区划四级联动数据表
11-17
全球区域的四级联动表，将近7000条数据，从国家=》省份=》市=》县区
京东四级地址（省、市、县、乡镇）
10-16
京东四级地址JavaScript版本，网上的都是数据库版本多，ajax或者毕竟性能查。
全国四级地址库
05-06
全国四级地址划分全国四级地址划分全国四级地址划分全国四级地址划分全国四级地址划分
仿某宝地址四级联动，使用方便
10-02
在四级联动地址选择中，JavaScript起到了核心作用。它监听用户的每个选择，并根据所选的上一级别自动填充和更新下一级别的选项。例如，当用户选择了一个省份后，JavaScript会通过AJAX请求获取该省份下的所有城市数据...
【无标题】vue2 /Hbuilder 中 纯写 地址四级联动（简单易懂）
weixin_52845337的博客
11-04 399
这几天 小白项目需求 将 全国地址三级联动更改为 四级联动。然后在 网上一直是搜 四级联动，比如 淘宝京东 四级联动。根据高德api 四级联动 都有很多不完整 而且大多是三级联动。于是自己整合了一套 完全的 四级联动 粘贴 即可用提示：以下是本篇文章正文内容，下面案例可供参考。
uniapp [全端兼容] - 详细实现“省/市/区县/街道/村庄“四级联动选择器列表，弹出层A~Z索引式城市区域列表逐级选中及回退，省市区镇四级联动地址选择器组件插件，全屏弹窗索引列表选择当前位置！
最新发布
高级前端工程师
08-09 3606
uni-app，四级联动选择器，安卓app，苹果app，微信小程序，移动端，H5网页，手机网站，微信小程序、支付宝小程序，手机app端，nvue，城市选择，省份市区，区县，乡镇，街道村庄，A-Z索引列表排序的城市列表，4级联动Select 列选择器，picker地址联动，uniApp实现省市区镇四级联动选项弹出层，弹框，先选省份再选市区，最多能选择到村庄，级联，无限，教程，实现选中省市区镇，地区四联动，实现省市区镇四级联动选择器（地址选择）省市区街道四级，弹出层，带json数据结构，懒加载，动态数据，接口加
中国 / 省市区县 / 四级联动 / 地址选择器(京东商城地址选择)
weixin_30835933的博客
04-08 1046
github上克隆开源的三级地址选择器，修改为四级地址选择器。效果图： 页面引入四个文件 juery.js city-picker.data.js (全国省市区数据) city-picker.js (js实现功能逻辑) city-picker.css (选择器样式，可优化样式) html页面代码 <div style="po...
android四级联动地址选择器
12-11
Android四级联动地址选择器是一种用户界面组件，用于实现在选择省、市、区和街道地址时的联动效果。它通常被用于用户注册、编辑个人信息等场景中，方便用户快速选择地址信息。 实现四级联动地址选择器，首先需要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值