从QQ网站中提取的纯JS省市区三级联动菜单
从QQ网站中提取的纯JS省市区三级联动菜单
发布时间:2016-12-30 来源:查字典编辑
摘要:我发现在http://ip.qq.com/的网站中有QQ自己的JS省市区三级联动。所以研究了一下。他的界面如下:何不直接使用的数据呢?惊喜的...

我发现在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动。所以研究了一下。他的界面如下:

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

何不直接使用的数据呢?

惊喜的是QQ是使用引用外部JS来实现三级联动的。JS如下:http://ip.qq.com/js/geo.js

使用方法如下:

复制代码 代码如下:

<!DOCTYPE html>

<html>

<head>

<title>QQ JS省市区三级联动</title>

<>

<>

<script type="text/javascript" src="geo.js"></script>

</head>

<body onload="setup();preselect('陕西省');promptinfo();">

<form>

<select name="province" id="s1">

<option></option>

</select>

<select name="city" id="s2">

<option></option>

</select>

<select name="town" id="s3">

<option></option>

</select>

<input id="address" name="address" type="hidden" value="" />

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

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类