从QQ网站中提取的纯JS省市区三级联动

最新推荐文章于 2020-02-02 12:32:43 发布
最新推荐文章于 2020-02-02 12:32:43 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： ┈━═☆ JQuery 文章标签： javascript 省市区 三级联动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kongcheng_001/article/details/48088765
版权

QQ是使用引用外部JS来实现三级联动的。JS如下：http://ip.qq.com/js/geo.js
这里写图片描述

<!DOCTYPE html>
<html>
<head>
<title>QQ JS省市区三级联动</title>
<!-- 直接使用QQ的省市区数据 -->
<!--
<script type="text/javascript" src="http://ip.qq.com/js/geo.js"></script>
-->
<script type="text/javascript" src="geo.js"></script>
</head>
<body onload="setup();preselect('陕西省');promptinfo();">
        <form>
            <select class="select" name="province" id="s1">
              <option></option>
            </select>
            <select class="select" name="city" id="s2">
              <option></option>
            </select>
            <select class="select" name="town" id="s3">
              <option></option>
            </select>
            <input id="address" name="address" type="hidden" value="" />
          <input onclick="alert(document.getElementById('address').value); return false;" type="submit" value="提交" />
        </form>
<script>

//这个函数不是必须的，在该示例中需要将调用的值弹出以方便查看才用到的，而不是在geo.js里每次更改地址时都会调用此函数
function promptinfo()
{
    var address = document.getElementById('address');
    var s1 = document.getElementById('s1');
    var s2 = document.getElementById('s2');
    var s3 = document.getElementById('s3');
    address.value = s1.value + s2.value + s3.value;
}

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

实例下载：http://files.cnblogs.com/zjfree/qqJsAddress.rar

北溟の魚
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
腾讯地图全国地址信息（省、市、区、gcj02 gps）sql文件
03-29
腾讯地图全国地址信息（省、市、区、gcj02 gps）sql文件
通过js node拉取腾讯地图省市区县四级数据
weixin_44826388的博客
04-26 541
最后,生成的.txt文件可修改后缀名为.cvs,然后打开可另存为.xlsx格式，这样数据库可直接导入。首先创建一个文件夹，在文件夹中创建下面js文件，然后在当前文件夹cmd打开小黑框，执行。根据腾讯地图apikey拿取腾讯地图数据。
高德&腾讯地图省市区文件2021最新SQL数据库文件
九城科技 博客：https://blog.minkse.cn/
02-02 4386
直接贴地址，如果腾讯地图有更新我也会同步更新在github上 目前只提供了JSON格式，暂无SQL和XML https://github.com/qq940993208/TencentMapCity
从腾讯网站中提取的纯JS省市区三级联动
手写白Tech
07-24 4622
今天收到园友信息，想问我要原来写的一个 《 纯JS省市区三级联动 》文章中最新的省市区数据。 那个是老早以前搞的。记得数据是从数据库中提取生成的。一时也找不到当时的数据库了。 我发现在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动。所以研究了一下。他的界面如下： 何不直接使用的数据呢？ 惊喜的是QQ是使用引用外部JS来实现三级联动的。JS如下：http:/
从QQ网站中提取的纯JS省市区三级联动菜单
10-26
在浏览网页过程中发现QQ自己的JS省市区三级联动。所以研究了一下，就将其提取出来了。他的界面如下，喜欢的朋友可以学习下
从QQ网站中提取的纯JS省市区三级联动菜单.docx
01-22
从QQ网站中提取的纯JS省市区三级联动菜单.docx
省市区三级联动json格式文件
09-25
省市区三级联动json格式文件省市区三级联动json格式文件省市区三级联动json格式文件省市区三级联动json格式文件省市区三级联动json格式文件省市区三级联动json格式文件
省市区三级联动传值名称+省市区腾讯地图定位+经纬度定位
12-02
省市区三级联动，输入街道具体地址可定位到腾讯地图上，在地图上点击获取点击位置的经纬度，后台传值为省市区的名称，不是代号。
全国省市县的编码，腾讯地图
12-08
最近要录入中国省市区的名称和编码，用于区域功能，这是最新的腾讯地图上录入的，费了很大劲，因为调腾讯地图的接口，老是会掉线，后来花了几个小时，补充好。有这个需要的朋友，可以直接拿来用。现在是全的
纯JS省市区三级联动，全国省市区用js实现三级下拉，直接引用js即可
06-13
JS来实现三级联动，把文件解压后，运行index.html看效果即可，geo_copy.js可不用看，一个小修改后的副本而已
全国省市县的编码，腾讯地图，mysql文件 加强版。
05-29
针对网友提供的资源，做如下优化。 1 网友提供的数据 location 是json ，我把这个分解出来，存在单独的字段里，便于业务基于lbs 搜索 。 2 文件格式优化，提速导入 （10分钟压缩至15秒） 网有导出的sql 4万多行数据的单条 sql 的，我转为bulk insert 减少sql 请求， 以后也拜托同行给数据时，请按 insert into tbl (a,b,c) values('a1','b1','c1') , ('a2' , 'b2','c2').... 简单的说，你往货车上装车苹果，你是一箱一箱的放上去的， 不是一个苹果一个苹果的往上入。 mysql的省市区表 对应腾讯国家省市区sql 时间：2020年01月16号 包含省市区，省别名，上级。 省市区上级，省市区分别的等级 省市区的中心经纬度等
最全面的全国省市县Geo信息（json，js版）----echarts地图
10-31
echarts现在不支持在线构建，因此在网上搜到echarts的Json并整合起来，希望能够给大家提供方便
vue+mintui 省市县3级联动 cdn引入
12-26
vue+mintui 省市县3级联动 cdn引入方式，花了点时间整理下，还是挺多坑的，应该可以帮助到你们
JS|省市区代码及地区名称|地区三级联动
08-02
JS|省市区代码及地区名称|地区三级联动
全国省城市县城经纬度(腾讯地图版)
03-22
文件中使用的都是腾讯地图的坐标。全国各个省份的经度纬度，包含香水，澳门和台湾；全国400多个城市，8000多个区县。文本是js格式，已经用define开发成模块，直接引入就可以使用。格式举例：{ id:"110000", name:"北京", fullname:"北京市", pinyin:["bei","jing"], location:{ lat:39.90469, lng:116.40717 }
腾讯地图三级联动
07-16
城市数据来自于腾讯地图- 省市区变动都不需要自己更新，数据为腾讯地图数据； 腾讯地图api http://lbs.qq.com/webservice_v1/guide-region.html ; 另外，我使用的是腾讯开放的key,各位使用还是自己申请一个key替换掉； 不想下载的同学移步这里：https://blog.csdn.net/m0_37596829/article/details/81036063； 代码一样齐全，丝毫不缺；
腾讯地图行政区域经纬度转Mysql国内地区数据库
11-23
腾讯地图行政区划转Mysql数据库表，新加地区拼音行政区域经纬度和经纬度字段，方便计算距离，经纬度只记录到三级。
省市区三级联动elementui
最新发布
07-27
省市区三级联动是一种常见的前端组件，可以通过选择省、市、区三个级别的选项来获取用户选择的地址信息。在使用Element UI框架实现省市区三级联动时，可以使用element-china-area-data这个组件库来提供省市区的数据源。 首先，需要安装element-china-area-data组件依赖。可以通过npm或者cnpm命令来进行安装，具体命令如下： ``` npm install element-china-area-data -S ``` 或者 ``` cnpm install element-china-area-data -S ``` 然后，在目标页面中引入需要的组件和数据源。可以使用import语句来引入需要的组件和数据，具体代码如下： ```javascript import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from "element-china-area-data"; ``` 接下来，在页面中使用el-cascader标签来创建省市区三级联动的选择器。可以设置标签的options属性为regionDataPlus，selectedOptions属性为一个空数组，具体代码如下： ```html <div style="width:460px;"> <el-cascader style="width:100%;" :options="options" v-model="selectedOptions" @change="addressChoose"></el-cascader> </div> ``` 在data中定义元素，可以将options设置为regionDataPlus，selectedOptions设置为空数组，具体代码如下： ```javascript data() { return { options: regionDataPlus, selectedOptions: \[\], } } ``` 最后，可以定义一个触发事件的函数方法来处理用户选择的地址信息。可以在addressChoose函数中获取用户选择的省市区的编码值，并通过CodeToText来将编码值转换为对应的文本信息，具体代码如下： ```javascript addressChoose(value) { console.log("地址", value); console.log('省市区：',CodeToText\[value\[0\]\],CodeToText\[value\[1\]\],CodeToText\[value\[2\]\]); } ``` 通过以上步骤，就可以实现省市区三级联动的功能。用户选择省市区后，可以通过addressChoose函数来获取用户选择的地址信息，并进行相应的处理。 #### 引用[.reference_title] - *1* [elementUI之省市区三级联动](https://blog.csdn.net/qq_40976321/article/details/119034296)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

北溟の魚

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值