<html> <head> <title>html 下拉框级联</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="150px;height:23px;line-height:30px;" id="province" onchange="city_change(this)"> </select> </div> <div style="text-align:center;margin:10px auto;">城市： <select style="150px;height:23px;line-height:30px;" id="city" onchange="area_change(this)"> </select> </div> <div style="text-align:center;margin:10px auto;">区域： <select style="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>