從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)文章
Element-UI的?InfiniteScroll?無限滾動組件基本使用及應(yīng)用場景
這篇文章主要介紹了Element-UI的InfiniteScroll無限滾動組件基本使用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-06-06uniapp實(shí)現(xiàn)app自動更新詳細(xì)步驟
這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)app自動更新的詳細(xì)步驟,文中給出了詳細(xì)的代碼示例以及圖文教程,對大家學(xué)習(xí)或者使用uniapp具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-08-08JavaScript實(shí)現(xiàn)跟隨鼠標(biāo)移動的盒子
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)跟隨鼠標(biāo)移動的盒子,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-01-01微信小程序中如何使用flyio封裝網(wǎng)絡(luò)請求
這篇文章主要介紹了微信小程序中如何使用flyio封裝網(wǎng)絡(luò)請求,F(xiàn)ly.js 通過在不同 JavaScript 運(yùn)行時通過在底層切換不同的 Http Engine來實(shí)現(xiàn)多環(huán)境支持,但同時對用戶層提供統(tǒng)一、標(biāo)準(zhǔn)的Promise API,需要的朋友可以參考下2019-07-07動態(tài)生成的IFRAME,設(shè)置SRC時的問題解決分析
動態(tài)生成的IFRAME,設(shè)置SRC時的,不同位置帶來的影響。 以下所說的是在IE7下運(yùn)行的。IE6下也是同樣。 在這個blog中,直接點(diǎn)擊運(yùn)行代碼,和把下面代碼保存到為網(wǎng)頁在運(yùn)行(以本地文件或域名訪問),效果不一樣。 先看例子:2008-04-04關(guān)于BootstrapTable 導(dǎo)出數(shù)據(jù)的問題最終解決方案
這篇文章主要介紹了BootstrapTable 導(dǎo)出數(shù)據(jù)的問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-03-03