jsp+js省市区三级联动

<select id="province">
<option value="-1">请选择</option>
</select>>
<select id="city"></select>>
<select id="town"></select>>
<script>
var provinceArr = [ ‘江苏‘, ‘浙江‘ ];
var cityArr=[[‘南京市‘,‘苏州市‘,‘常州市‘,‘无锡市‘,‘镇江市‘],[‘杭州市‘,‘宁波市‘,‘温州市‘,‘绍兴市‘]];
var townArr=[[[‘玄武区‘,‘秦淮区‘,‘鼓楼区‘,‘建邺区‘,‘雨花台区‘,‘栖霞区‘,‘浦口区‘,‘六合区‘,‘江宁区‘,‘溧水区‘],[‘吴中区‘,‘虎丘区‘,‘工业园区‘],[‘金坛市‘,‘钟楼区‘,‘天宁区‘],[‘梁溪区‘,‘滨湖区‘,‘惠山区‘,‘锡山区‘,‘江阴市‘],[‘京口区‘,‘润州区‘,‘丹徒区‘]],
[[‘上城区‘,‘下城区‘,‘余杭区‘,‘拱墅区‘,‘西湖区‘,‘江干区‘],[‘江东区‘,‘海曙区‘,‘鄞州区‘,‘江北区‘,‘镇海区‘,‘北仑区‘],[‘鹿城区‘,‘龙湾区‘,‘瓯海区‘,‘永嘉县‘],[‘越城区‘,‘柯桥区‘,‘上虞区‘,‘诸暨市‘,‘嵊州市‘,‘新昌县‘]]];
function createOption(obj,dara){
for(var i in dara){
var op=new Option(dara[i],i);
obj.options.add(op);
}
}
var province = document.getElementById("province")
createOption(province,provinceArr);

var city = document.getElementById("city")
province.onchange=function(){
city.options.length=0;
createOption(city,cityArr[province.value]);
}

var town = document.getElementById("town")
city.onchange=function(){
town.options.length=0;
createOption(town,townArr[province.value][city.value]);
}

</script>

原文地址:https://www.cnblogs.com/zhangsblog12345/p/11161276.html

时间: 2024-10-14 10:15:49

jsp+js省市区三级联动的相关文章

QQ JS省市区三级联动

如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title> <!-- 使用QQ的省市区数据 --> <!-- <script type="text/javascript" src="http://ip.qq.com/js/geo.js"></script> --> <

【修改】纯JS省市区三级联动 支持js默认省市区

---恢复内容开始--- <!DOCTYPE html><html><head><title>修改,QQ JS省市区三级联动 -支持默认省市区</title><!-- 使用QQ的省市区数据 --><!--<script type="text/javascript" src="http://ip.qq.com/js/geo.js"></script>--><

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

http://www.cnblogs.com/zjfree/p/3269864.html 今天收到园友信息,想问我要原来写的一个 < 纯JS省市区三级联动 >文章中最新的省市区数据. 那个是老早以前搞的.记得数据是从数据库中提取生成的.一时也找不到当时的数据库了. 我发现在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动.所以研究了一下.他的界面如下: 何不直接使用的数据呢? 惊喜的是QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com

JS 省市区三级联动

JS 省市区三级联动: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q

用jsp实现省市区三级联动下拉

jsp+jquery实现省市区三级联动下拉 不少系统都需要实现省市区三级联动下拉,像人口信息管理.电子商务网站.会员管理等,都需要填写地址相关信息.而用ajax实现的无刷新省市区三级联动下拉则可以改善用户体验,目前基本上所有网站都是采用这一种方式.现在ajax的使用已经不像最初那样使用最原始的方法了,因为有很多的js框架供我们选择,我们只需要调用它们的一个方法就可以实现ajax功能,而其他的则交给js组件去完成. 最近整理了一份最新的全国省市区县数据库,再加上之前还没有在jsp中实现过省市区三级

JS省市区三级联动

不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动. 当省市区数据变动是只需调正js即可. 使用方法: <!DOCTYPE html><html><head><title>纯JS省市区联动</title><script type="text/javascript" src="jsAddress.js"></script></head><bod

PHP+Ajax+JS省市区三级联动

     基本思想就是:在JS动态创建select控件的option,通过Ajax获取在PHP从SQL数据库获取的省市区信息,代码有点长,但很多都是类似的,例如JS中省.市.区获取方法类似,PHP中通过参数不同执行不同的select语句.  index.html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1

省市区三级联动 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"></scri

省市区三级联动(二)JS部分简单版

通过对上一篇<省市区三级联动>的学习发现JScript部分省市区的填充代码几乎相同,所以可以写成一个函数. 注意:html部分和chuli.php部分不变 1.下拉列表填充可以写成带参数的函数 $("#sjld").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"