^{<noscript id="dwdvl"></noscript>}

從QQ網站中提取的純JS省市區三級聯動菜單

2019-11-20 21:23:16

字體：大中小

來源：轉載

供稿：網友

我發現在 http://ip.qq.com/ 的網站中有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> 