从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 函数使用说明
Apr 07 Javascript
Javascript中的相等与不等运算
Apr 25 Javascript
html文本框提示效果的示例代码
Jun 28 Javascript
javascript过滤数组重复元素的实现方法
May 03 Javascript
Angular 向组件传递模板的两种方法
Feb 23 Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 Javascript
vue中过滤器filter的讲解
Jan 21 Javascript
Vue.js路由实现选项卡简单实例
Jul 24 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
JavaScript中Object、map、weakmap的区别分析
Dec 15 Javascript
vue项目实现分页效果
Mar 24 Vue.js
优化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
一步一步学习PHP(5) 类和对象
2010/02/16 PHP
php正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
CI框架学习笔记(一) - 环境安装、基本术语和框架流程
2014/10/26 PHP
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
zend framework重定向方法小结
2016/05/28 PHP
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
js冒泡法和数组转换成字符串示例代码
2013/08/14 Javascript
查找iframe里元素的方法可传参
2013/09/11 Javascript
Jquery实现的tab效果可以指定默认显示第几页
2013/10/16 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
究竟什么是Node.js?Node.js有什么好处?
2015/05/29 Javascript
简介JavaScript中setUTCSeconds()方法的使用
2015/06/12 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
2016/10/14 Javascript
JS调用打印机功能简单示例
2016/11/28 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
js处理包含中文的字符串实例
2017/10/11 Javascript
jQuery实现简单的回到顶部totop功能示例
2017/10/16 jQuery
开发用到的js封装方法(20种)
2018/10/12 Javascript
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
2020/08/07 Javascript
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
在Python中使用HTMLParser解析HTML的教程
2015/04/29 Python
Python图片转换成矩阵,矩阵数据转换成图片的实例
2018/07/02 Python
Python连接Mssql基础教程之Python库pymssql
2018/09/16 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
KIKO MILANO英国官网:意大利知名化妆品和护肤品品牌
2017/09/25 全球购物
2014年管理人员工作总结
2014/12/01 职场文书
北京英语导游词
2015/02/12 职场文书
部队2015年终工作总结
2015/04/02 职场文书
vue实现登陆页面开发实践
2022/05/30 Vue.js