從QQ網(wǎng)站中提取的純JS省市區(qū)三級聯(lián)動菜單
更新時間：2013年12月25日 15:26:26 作者：
在瀏覽網(wǎng)頁過程中發(fā)現(xiàn)QQ自己的JS省市區(qū)三級聯(lián)動。所以研究了一下，就將其提取出來了。他的界面如下，喜歡的朋友可以學(xué)習(xí)下
我發(fā)現(xiàn)在 http://ip.qq.com/ 的網(wǎng)站中有QQ自己的JS省市區(qū)三級聯(lián)動。所以研究了一下。他的界面如下：
何不直接使用的數(shù)據(jù)呢？
驚喜的是QQ是使用引用外部JS來實(shí)現(xiàn)三級聯(lián)動的。JS如下：http://ip.qq.com/js/geo.js
使用方法如下：
<!DOCTYPE html>
<html>
<head>
<title>QQ JS省市區(qū)三級聯(lián)動</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>
//這個函數(shù)是必須的，因?yàn)樵趃eo.js里每次更改地址時會調(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>
何不直接使用的數(shù)據(jù)呢？
驚喜的是QQ是使用引用外部JS來實(shí)現(xiàn)三級聯(lián)動的。JS如下：http://ip.qq.com/js/geo.js
使用方法如下：
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<title>QQ JS省市區(qū)三級聯(lián)動</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>
//這個函數(shù)是必須的，因?yàn)樵趃eo.js里每次更改地址時會調(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>
您可能感興趣的文章:
- PHP+Mysql+Ajax+JS實(shí)現(xiàn)省市區(qū)三級聯(lián)動
- javascript實(shí)現(xiàn)省市區(qū)三級聯(lián)動下拉框菜單
- 省市區(qū)三級聯(lián)動下拉框菜單javascript版
- js實(shí)現(xiàn)一個省市區(qū)三級聯(lián)動選擇框代碼分享
- JSON+Jquery省市區(qū)三級聯(lián)動
- 原生js實(shí)現(xiàn)省市區(qū)三級聯(lián)動代碼分享
- vue.js模仿京東省市區(qū)三級聯(lián)動的選擇組件實(shí)例代碼
- javascript實(shí)現(xiàn)簡單的省市區(qū)三級聯(lián)動
- javascript省市區(qū)三級聯(lián)動下拉框菜單實(shí)例演示
- js實(shí)現(xiàn)省市區(qū)三級聯(lián)動非select下拉框版
相關(guān)文章
這篇文章主要介紹了用Node.js通過sitemap.xml批量抓取美女圖片的方法和相關(guān)代碼，有需要的小伙伴可以參考下。2015-05-05
這篇文章主要給大家介紹了關(guān)于axios返回空對象的問題解決方法，文中介紹的非常詳細(xì)，相信對大家學(xué)習(xí)或者使用axios具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-04-04
js刪除數(shù)組元素、清空數(shù)組的簡單方法(必看)
下面小編就為大家?guī)硪黄猨s刪除數(shù)組元素、清空數(shù)組的簡單方法(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
JavaScript實(shí)現(xiàn)字符串截取的三個方法總結(jié)
在?JavaScript?中，可以使用?substr()、slice()?和?substring()?方法截取字符串。這篇文章就來通過一些示例和大家聊聊這些方法的具體操作，需要的可以參考一下2023-02-02
BootStrap selectpicker后臺動態(tài)綁定數(shù)據(jù)的方法
這篇文章主要為大家詳細(xì)介紹了BootStrap selectpicker后臺動態(tài)綁定數(shù)據(jù)的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
javascript設(shè)計模式之module(模塊)模式
這篇文章主要為大家詳細(xì)介紹了javascript設(shè)計模式之module(模塊)模式 ，感興趣的小伙伴們可以參考一下2016-08-08
xml文檔轉(zhuǎn)換程序的一個小應(yīng)用，幾行代碼生成餅圖。源代碼打包提供。2010-11-11
彈出層想必大家都有見過吧，本示例介紹的是一個定位至屏幕居中的彈出層，個人感覺效果還不錯，感興趣的朋友可以參考下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刷新頁面實(shí)現(xiàn)代碼，需要的朋友可以參考下。2009-11-11