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

時間 2019-12-01

標籤網站提取省市區三級聯動欄目騰訊简体版

原文原文鏈接

今天收到園友信息，想問我要原來寫的一個《純JS省市區三級聯動》文章中最新的省市區數據。javascript

那個是老早之前搞的。記得數據是從數據庫中提取生成的。一時也找不到當時的數據庫了。html

我發如今 http://ip.qq.com/ 的網站中有QQ本身的JS省市區三級聯動。因此研究了一下。他的界面以下：java

何不直接使用的數據呢？數據庫

驚喜的是QQ是使用引用外部JS來實現三級聯動的。JS以下：http://ip.qq.com/js/geo.js函數

使用方法以下：post

<!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>