从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 相关文章推荐
编辑浪子版表单验证类
May 12 Javascript
jquery插件 cluetip 关键词注释
Jan 12 Javascript
jquery 单击li防止重复加载的实现代码
Dec 24 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
Sep 14 Javascript
jquery插件orbit.js实现图片折叠轮换特效
Apr 14 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 Javascript
深入理解MVC中的时间js格式化
May 19 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
vue中将html字符串转换成html后遇到的问题小结
Dec 10 Javascript
浅析JavaScript异步代码优化
Mar 18 Javascript
浅谈Vue.set实际上是什么
Oct 17 Javascript
深入详解JS函数的柯里化
Jun 09 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
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
Laravel 默认邮箱登录改成用户名登录的实现方法
2019/08/12 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
jQuery获取多种input值的简单实现方法
2016/06/20 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
nodejs入门教程六:express模块用法示例
2017/04/24 NodeJs
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
2017/07/04 Javascript
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
实现一个完整的Node.js RESTful API的示例
2017/09/29 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
Python学习资料
2007/02/08 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
python实现二叉树的遍历
2017/12/11 Python
python3学习笔记之多进程分布式小例子
2018/02/13 Python
python logging重复记录日志问题的解决方法
2018/07/12 Python
python3 爬取图片的实例代码
2018/11/06 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
flask 实现token机制的示例代码
2019/11/07 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
美国户外运动商店:Sun & Ski
2018/08/23 全球购物
Conforama西班牙:您的家具、装饰和电器商店
2020/02/21 全球购物
清扬洗发水广告词
2014/03/14 职场文书
我为自己代言广告词
2014/03/18 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
水利水电专业自荐信
2014/07/08 职场文书
鼋头渚导游词
2015/02/05 职场文书
餐馆开业致辞
2015/08/01 职场文书