从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 相关文章推荐
基于jQuery UI CSS Framework开发Widget的经验
Aug 21 Javascript
jQuery代码优化 选择符篇
Nov 01 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 Javascript
JS中生成随机数的用法及相关函数
Jan 09 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
vue生成token保存在客户端localStorage中的方法
Oct 25 Javascript
JS中移除非数字最多保留一位小数
May 09 Javascript
在Vue组件中获取全局的点击事件方法
Sep 06 Javascript
Vue项目中配置pug解析支持
May 10 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
Jun 18 Javascript
vue学习笔记之slot插槽用法实例分析
Feb 29 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模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
浅谈laravel数据库查询返回的数据形式
2019/10/21 PHP
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
JS启动应用程序的一个简单例子
2008/05/11 Javascript
JavaScript 获取事件对象的注意点
2009/07/29 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
JavaScript插件化开发教程 (一)
2015/01/27 Javascript
jQuery获取URL请求参数的方法
2015/07/18 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
js实现自定义进度条效果
2017/03/15 Javascript
详解如何在vue中使用sass
2017/06/21 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
2021/01/27 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
2019/05/08 Javascript
python中常用的各种数据库操作模块和连接实例
2014/05/29 Python
python实现的AES双向对称加密解密与用法分析
2017/05/02 Python
Python读取txt内容写入xls格式excel中的方法
2018/10/11 Python
python使用pyecharts库画地图数据可视化的实现
2020/03/25 Python
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
员工自我鉴定范文
2013/10/06 职场文书
求职简历中个人的自我评价
2013/12/25 职场文书
不打扫卫生检讨书
2014/02/12 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
《夸父追日》教学反思
2016/02/20 职场文书
《合作意向书》怎么写?
2019/08/20 职场文书
Python 发送SMTP邮件的简单教程
2021/06/24 Python
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python
python函数的两种嵌套方法使用
2022/04/02 Python
关于Python中进度条的六个实用技巧分享
2022/04/05 Python