從QQ網(wǎng)站中提取的純JS省市區(qū)三級(jí)聯(lián)動(dòng)菜單

更新時(shí)間：2013年12月25日 15:26:26 作者：

在瀏覽網(wǎng)頁過程中發(fā)現(xiàn)QQ自己的JS省市區(qū)三級(jí)聯(lián)動(dòng)。所以研究了一下，就將其提取出來了。他的界面如下，喜歡的朋友可以學(xué)習(xí)下

我發(fā)現(xiàn)在 http://ip.qq.com/ 的網(wǎng)站中有QQ自己的JS省市區(qū)三級(jí)聯(lián)動(dòng)。所以研究了一下。他的界面如下：

何不直接使用的數(shù)據(jù)呢？

驚喜的是QQ是使用引用外部JS來實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)的。JS如下：http://ip.qq.com/js/geo.js

使用方法如下：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html> 
<html> 
<head> 
<title>QQ JS省市區(qū)三級(jí)聯(lián)動(dòng)</title> 
<!-- 直接使用QQ的省市區(qū)數(shù)據(jù) --> 
<!-- 
<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> 

//這個(gè)函數(shù)是必須的，因?yàn)樵趃eo.js里每次更改地址時(shí)會(huì)調(diào)用此函數(shù) 
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> 

您可能感興趣的文章:

相關(guān)文章

用Node.js通過sitemap.xml批量抓取美女圖片
這篇文章主要介紹了用Node.js通過sitemap.xml批量抓取美女圖片的方法和相關(guān)代碼，有需要的小伙伴可以參考下。
2015-05-05
關(guān)于axios返回空對象的問題解決
這篇文章主要給大家介紹了關(guān)于axios返回空對象的問題解決方法，文中介紹的非常詳細(xì)，相信對大家學(xué)習(xí)或者使用axios具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。
2017-04-04
js刪除數(shù)組元素、清空數(shù)組的簡單方法(必看)
下面小編就為大家?guī)硪黄猨s刪除數(shù)組元素、清空數(shù)組的簡單方法(必看)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-07-07
JavaScript實(shí)現(xiàn)字符串截取的三個(gè)方法總結(jié)
在?JavaScript?中，可以使用?substr()、slice()?和?substring()?方法截取字符串。這篇文章就來通過一些示例和大家聊聊這些方法的具體操作，需要的可以參考一下
2023-02-02
BootStrap selectpicker后臺(tái)動(dòng)態(tài)綁定數(shù)據(jù)的方法
這篇文章主要為大家詳細(xì)介紹了BootStrap selectpicker后臺(tái)動(dòng)態(tài)綁定數(shù)據(jù)的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
javascript設(shè)計(jì)模式之module(模塊)模式
這篇文章主要為大家詳細(xì)介紹了javascript設(shè)計(jì)模式之module(模塊)模式，感興趣的小伙伴們可以參考一下
2016-08-08
xml文檔轉(zhuǎn)換工具，附圖表例子(hta)
xml文檔轉(zhuǎn)換程序的一個(gè)小應(yīng)用，幾行代碼生成餅圖。源代碼打包提供。
2010-11-11
JS 彈出層定位至屏幕居中示例
彈出層想必大家都有見過吧，本示例介紹的是一個(gè)定位至屏幕居中的彈出層，個(gè)人感覺效果還不錯(cuò)，感興趣的朋友可以參考下
2014-05-05
js實(shí)現(xiàn)的點(diǎn)擊數(shù)量加一可操作數(shù)據(jù)庫
這篇文章主要介紹了js如何實(shí)現(xiàn)的點(diǎn)擊數(shù)量加一操作數(shù)據(jù)庫,需要的朋友可以參考下
2014-05-05
Javascript 刷新全集常用代碼
Javascript刷新頁面實(shí)現(xiàn)代碼，需要的朋友可以參考下。
2009-11-11