<html><head> ???<title>$Title$</title> ???<meta charset="UTF-8"/> ???<style type="text/css"> ???????* { ???????????margin: 0px; ???????????padding: 0px; ???????} ???????.change { ???????????width: 800px; ???????????border: 1px solid red; ???????????margin: 50px auto; ???????????text-align: center; ???????} ???</style></head><body><h1 style="text-align:center;"> java 开发多级数据联动系统 - Amy 老师 </h1><div class="change">欢迎同学来到谭州学院试听课程！！！<br/> ???<div style="text-align:center;margin:10px auto;">省份： ???????<select style="width:150px;height:23px;line-height:30px;" id="province" onchange="city_change(this)"> ???????</select> ???</div> ???<div style="text-align:center;margin:10px auto;">城市： ???????<select style="width:150px;height:23px;line-height:30px;" id="city" onchange="area_change(this)"> ???????</select> ???</div> ???<div style="text-align:center;margin:10px auto;">区域： ???????<select style="width:150px;height:23px;line-height:30px;" id="area"> ???????</select> ???</div></div><script type="text/javascript" src="/Script/jquery-1.12.4.min.js"></script><script type="text/javascript"> ???var datas = { ???????province: [{ ???????????"id": 1001, ???????????"name": "湖南省" ???????}, { ???????????"id": 1002, ???????????"name": "黑龙江省" ???????}], ???????city: { ???????????"1001": "100101#长沙市,100102#郴州市", ???????????"1002": "100201#哈尔滨市,100202#黑河市" ???????}, ???????area: { ???????????"100101": "10010101#芙蓉区,100101#雨花区", ???????????"100102": "10010201#长沙区,100102#郴州区", ???????????"100201": "10020101#南岗区,10020102#大理区", ???????????"100202": "10020201#哈尔滨区,10020202#黑河区" ???????} ???} ???$(function () { ???????init_province(); // 初始化省份数据 ???????????}) ???????function init_province() { ???????$("#city").empty() ???????$("#area").empty() ???????$("#province").append("<option>----请选择省份----</option>"); ???????var provinceArr = datas.province; ??// 得到省份数组 ???????for(var i=0;i<provinceArr.length;i++){ ???????????$("#province").append("<option value=‘" + provinceArr[i].id + "‘>"+ provinceArr[i].name +"</option>"); ???????} ???} ???function city_change(obj) { ???????$("#city").empty() ???????$("#area").empty() ???????var value=obj.value; ???// 获取选中的省份 ???????// 根据省份的 id，找到对应的城市 ???????var cityDates = datas["city"][value]; ???????// 解析城市数据 ???????var citys = cityDates.split(","); ???????// 添加 默认选项 ???????$("#city").append("<option>---请选择市---</option>"); ???????// 遍历数据对象 ???????for(var i =0;i<citys.length;i++){ ???????????var v = citys[i].split("#"); ???????????var cityId = v[0]; ???????????var cityName = v[1]; ???????????$("#city").append("<option value=‘" + cityId + "‘>"+ cityName +"</option>"); ???????} ???} ???function area_change(obj) { ???????$("#area").empty() ???????var value=obj.value; ???// 获取选中的省份 ???????// 根据省份的 id，找到对应的城市 ???????var areaDates = datas["area"][value]; ???????// 解析城市数据 ???????var areas = areaDates.split(","); ???????$("#area").empty() ???????// 添加 默认选项 ???????$("#area").append("<option>---请选择市---</option>"); ???????// 遍历数据对象 ???????for(var i =0;i<areas.length;i++){ ???????????var v = areas[i].split("#"); ???????????var areaId = v[0]; ???????????var areaName = v[1]; ???????????$("#area").append("<option value=‘" + areaId + "‘>"+ areaName +"</option>"); ???????} ???}</script></body></html>[转]html 下拉框级联
原文地址：http://www.cnblogs.com/z5337/p/7468535.html