从QQ网站中提取的纯JS省市区三级联动

原创于 2013-12-25 15:16:32 发布 · 1.4k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#js省市地区 #js地方信息

Jquery 专栏收录该内容

44 篇文章

订阅专栏

本文介绍了一种基于QQ网站的纯JavaScript实现的省市区三级联动选择器。该选择器直接利用了QQ提供的地理数据，并通过简单的HTML和JavaScript代码实现了地区联动的功能。文章中的示例代码展示了如何初始化页面并预选某个省份。

从QQ网站中提取的纯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>