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


Posted in Javascript onDecember 25, 2013

我发现在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动。所以研究了一下。他的界面如下:
从QQ网站中提取的纯JS省市区三级联动菜单 
何不直接使用的数据呢?

惊喜的是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>
Javascript 相关文章推荐
javascript CSS画图之基础篇
Jul 29 Javascript
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
Apr 01 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
Mar 29 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 Javascript
javascript中call,apply,bind的用法对比分析
Feb 12 Javascript
jQuery实现的兼容性浮动层示例
Aug 02 Javascript
angularjs实现多张图片上传并预览功能
Feb 24 Javascript
angular过滤器实现排序功能
Jun 27 Javascript
浅析从vue源码看观察者模式
Jan 29 Javascript
Vue 按键修饰符处理事件的方法
May 04 Javascript
原生JS实现的碰撞检测功能示例
May 18 Javascript
highcharts.js数据绑定方式代码实例
Nov 13 Javascript
优化javascript的执行效率一些方法总结
Dec 25 #Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
Dec 25 #Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
Dec 25 #Javascript
js 动态加载事件的几种方法总结
Dec 25 #Javascript
js 鼠标移动显示图片的简单实例
Dec 25 #Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 25 #Javascript
制作jquery遮罩层效果导航菜单代码分享
Dec 25 #Javascript
You might like
把77A收信机改造成收音机
2021/03/02 无线电
tp5.1 框架数据库-数据集操作实例分析
2020/05/26 PHP
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
window.onload追加函数使用示例
2014/03/03 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
vue两个组件间值的传递或修改方式
2018/07/04 Javascript
如何优雅地在Node应用中进行错误异常处理
2019/11/25 Javascript
vant实现购物车功能
2020/06/29 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
[41:05]Serenity vs Pain 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
Python break语句详解
2014/03/11 Python
Python基于jieba库进行简单分词及词云功能实现方法
2018/06/16 Python
django框架模型层功能、组成与用法分析
2019/07/30 Python
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
调用其他python脚本文件里面的类和方法过程解析
2019/11/15 Python
将python包发布到PyPI和制作whl文件方式
2019/12/25 Python
简单了解Django ORM常用字段类型及参数配置
2020/01/07 Python
DRF框架API版本管理实现方法解析
2020/08/21 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
英国奢侈品网站:MatchesFashion
2016/12/16 全球购物
以设计师精品品质提供快速时尚:Mostata
2019/05/10 全球购物
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
运动会方队口号
2014/06/07 职场文书
七年级作文之游记
2019/12/11 职场文书
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers