1、 Java代码
private static Map<String,List<String>> provinceMap = new HashMap<String,List<String>>();
private static String[] province = {"河北","山西","内蒙古","辽宁","吉林","黑龙江",
"江苏","浙江","安徽","福建","江西","山东","河南","湖北","湖南","广东","广西",
"海南","四川","贵州","云南","西藏","陕西","甘肃","青海","宁夏","新疆","台湾"
};
private static String[][] city = {
{"石家庄","唐山","秦皇岛","邯郸","邢台","保定","张家口","承德","沧州","廊坊","衡水"},
{"太原", "大同", "阳泉", "长治" ,"晋城","朔州","晋中","运城","忻州","临汾","吕梁"},
{"呼和浩特", "包头" ,"乌海" ,"赤峰" ,"通辽" ,"鄂尔多斯", "呼伦贝尔", "巴彦淖尔", "乌兰察布" ,"兴安" ,"锡林郭勒", "阿拉善"},
{"沈阳" ,"大连" ,"鞍山" ,"抚顺" ,"本溪" ,"丹东" ,"锦州" ,"营口" ,"阜新" ,"辽阳" ,"盘锦" ,"铁岭" ,"朝阳" ,"葫芦岛"},
{"长春" ,"吉林" ,"四平" ,"辽源" ,"通化" ,"白山" ,"松原" ,"白城", "延边"},
{"哈尔滨" ,"齐齐哈尔" ,"鸡西" ,"鹤岗" ,"双鸭山", "大庆 " ,"伊春" ,"佳木斯" ,"七台河" ,"牡丹江" ,"黑河" ,"绥化", "大兴安岭"},
{"南京" ,"无锡" ,"徐州", "常州" ,"苏州", "南通" ,"连云港" ,"淮安" ,"盐城" ,"扬州", "镇江" ,"泰州", "宿迁"},
{"杭州", "宁波" ,"温州" ,"嘉兴", "湖州", "绍兴", "金华","衢州","舟山","台州","丽水"},
{"合肥" ,"芜湖", "蚌埠", "淮南" ,"马鞍山", "淮北", "铜陵" ,"安庆" ,"黄山" ,"滁州" ,"阜阳" ,"宿州" ,"巢湖" ,"六安" ,"亳州", "池州", "宣城"},
{"福州" ,"厦门", "莆田", "三明 ","泉州 ","漳州", "南平", "龙岩" ,"宁德"},
{"南昌" ,"景德镇", "萍乡", "九江", "新余", "鹰潭", "赣州", "吉安", "宜春" ,"抚州" ,"上饶"},
{"济南" ,"青岛" ,"淄博", "枣庄", "东营", "烟台" ,"潍坊 ","威海" ,"济宁", "泰安", "日照" ,"莱芜" ,"临沂", "德州", "聊城", "滨州","菏泽"},
{"郑州 ","开封", "洛阳", "平顶山" ,"焦作", "鹤壁","新乡", "安阳", "濮阳" ,"许昌" ,"漯河" ,"三门峡", "南阳" ,"商丘", "信阳" ,"周口", "驻马店"},
{"武汉" ,"黄石 ","襄樊 ", "十堰", "荆州", "宜昌 ","荆门" ,"鄂州" ,"孝感 ","黄冈", "咸宁", "随州", "恩施"},
{"长沙", "株洲", "湘潭", "衡阳", "邵阳", "岳阳", "常德", "张家界" ,"益阳", "郴州" ,"永州", "怀化", "娄底", "湘西"},
{"广州", "深圳", "珠海", "汕头", "韶关" ,"佛山" ,"江门" ,"湛江" ,"茂名" ,"肇庆" ,"惠州" ,"梅州", "汕尾", "河源", "阳江" ,"清远", "东莞"," 中山" ,"潮州", "揭阳", "云浮"},
{"南宁", "柳州", "桂林" ,"梧州" ,"北海" ,"防城港" ,"钦州" ,"贵港", "玉林 ","百色 ","贺州" ,"河池" ,"来宾", "崇左"},
{"海口", "三亚"},
{"成都", "自贡", "攀枝花", "泸州", "德阳", "绵阳" ,"广元" ,"遂宁", "内江" ,"乐山" ,"南充" ,"宜宾", "广安 ","达州" ,"眉山", "雅安", "巴中", "资阳" ,"阿坝", "甘孜", "凉山"},
{"贵阳 ","六盘水", "遵义", "安顺", "铜仁" ,"毕节" ,"黔西南" ,"黔东南" ,"黔南"},
{"昆明", "曲靖" ,"玉溪" ,"保山" ,"昭通" ,"丽江", "普洱" ,"临沧" ,"文山" ,"红河" ,"西双版纳 ","楚雄", "大理", "德宏", "怒江" ,"迪庆"},
{"拉萨" ,"昌都", "山南" ,"日喀则", "那曲", "阿里", "林芝"},
{"西安", "铜川", "宝鸡" ,"咸阳 ","渭南" ,"延安", "汉中" ,"榆林" ,"安康" ,"商洛"},
{"兰州", "嘉峪关" ,"金昌", "白银" ,"天水" ,"武威", "张掖" ,"平凉" ,"酒泉" ,"庆阳", "定西", "陇南" ,"临夏", "甘南"},
{"西宁" ,"海东" ,"海北", "黄南" ,"海南","果洛", "玉树" ,"海西"},
{"银川", "石嘴山" ,"吴忠", "固原" ,"中卫"},
{"乌鲁木齐" ,"克拉玛依" ,"吐鲁番" ,"哈密", "和田", "阿克苏" ,"喀什", "克孜勒苏柯尔克孜", "巴音郭楞蒙古" ,"昌吉" ,"博尔塔拉蒙古" ,"伊犁哈萨克" ,"塔城 " ,"阿勒泰"},
{"台北", "高雄", "基隆", "台中" ,"台南", "新竹" ,"嘉义"}
};
static{
List<String> cityList = null;
for(int i=0,j=province.length;i<j;i++){
cityList= new ArrayList<String>();
provinceMap.put(province[i],cityList);
for(int m=0,n=city[i].length;m<n;m++){
cityList.add(city[i][m]);
}
}
}
public String[] getProvince(){
return province;
}
public List<String> getCities(String provinceName){
List<String> cityList = null;
if(provinceMap.containsKey(provinceName)){
cityList = provinceMap.get(provinceName);
}
return cityList;
}
2、Javascript代码
<script>
function init(){
a.getProvince(showProvince);
};
function showProvince(data){
var province = document.form.province;
province.options[0] = new Option('--请选择省份','--请选择省份');
for(var i=0,j=data.length;i<j;i++){
province.options[i+1] = new Option(data[i],data[i]);
}
};
function showCities(data){
var cities = document.form.cities;
for(var i=0,j=data.length;i<j;i++){
cities.options[i] = new Option(data[i],data[i]);
}
}
function initCitySelect(provinceName){
var ele = document.form.elements[1];
if(ele){
document.form.removeChild(ele);
}
if("--请选择省份"==provinceName){
return ;
}else{
var citiesSelect = document.createElement("select");
citiesSelect.name = "cities";
document.form.appendChild(citiesSelect);
return a.getCities(provinceName,showCities);
}
}
</script>
</head>
<body onload="init()">
<form name="form">
<select name="province" onchange="initCitySelect(this.value)"></select>
</form>
</body>
分享到：
相关推荐
本篇主要讨论如何利用SSH框架和DWR来实现省市二级联动效果。 省市二级联动通常是指在一个下拉菜单选择省份后，另一个下拉菜单会动态加载对应的市一级的数据。这种功能在很多网站的地址填写环节中常见，它可以提高...
两级联动通常指的是在一个下拉列表的选择会影响另一个下拉列表的选项，这种交互常见于省市区选择、产品分类等场景。 DWR的核心功能在于它提供了一种简单的方式来处理AJAX请求，使得前端JavaScript可以直接调用后端...
### DWR实现省市县三级联动的关键技术点 #### 一、DWR简介及应用场景 - **DWR**（Direct Web Remoting）是一种简化Ajax应用程序开发的框架，它使得客户端JavaScript可以直接调用服务器端的Java方法变得简单易行。在...
5. **三级联动**：三级联动通常指的是在界面上有三个互相依赖的选择框，例如省、市、区，当用户在第一个选择框中做出选择时，第二个选择框会自动更新为相应省下的城市，同样，选中城市后，第三个选择框会更新为该...
在这个"二级联动（连接数据池获取数据）"的场景中，DWR被用来在前端JS文件中获取来自后端Oracle数据库的数据，以实现联动下拉框的效果，这种效果常见于多级选择的表单中，如省市区的选择，当用户选择一个省份时，...
在IT行业中，"省市县三级联动"是一种常见的前端交互功能，尤其在网页表单填写时，用户选择省、市、县（区）时，下拉菜单会根据前一级的选择自动更新后两级的内容。这种功能提高了用户体验，减少了输入错误。下面我们...
标题 "dwr省市区三级级联" 涉及到的是一个前端开发中的常见问题，即如何实现省市区的三级联动效果。这个标题暗示我们这是一个使用Direct Web Remoting (DWR) 技术来实现的功能，它允许JavaScript与服务器端Java代码...
本文将详细讲解如何使用Direct Web Remoting (DWR) 实现一个从数据库中获取数据的二级联动菜单，以及涉及到的相关技术。 **DWR（Direct Web Remoting）** 是一个开源的Java库，它允许JavaScript与服务器端的Java...
当用户在一级下拉框中选择后，前端通过DWR调用Service层的方法获取对应的二级数据，更新二级下拉框；同理，选择二级后更新三级下拉框。 6. **测试与优化**：在浏览器中运行项目，测试各个级别联动是否正常工作。...