这里只介绍页面的代码和控制层代码
<script type="text/javascript">
$(function(){
$.post(
"toadd2",
{},
function(obj){
var minzus = obj.minzus;
var citys = obj.citys;
for(var i in minzus){
$("[name='mid']").append("<option value='"+minzus[i].mid+"'>"+minzus[i].mname+"</option>");
}
for(var i in citys){
$("[name='sheng_id']").append("<option value='"+citys[i].id+"'>"+citys[i].name+"</option>");
}
},
"json"
);
})
function sheng(id){
$.post(
"citys",
{id:id},
function(obj){
$("[name='shi_id']").empty();//每次追加清空
//追加一条请选择
$("[name='shi_id']").append("<option value=''>请选择</option>");
$("[name='qu_id']").empty();//每次追加清空
//追加一条请选择
$("[name='qu_id']").append("<option value=''>请选择</option>");
for(var i in obj){
$("[name='shi_id']").append("<option value='"+obj[i].id+"'>"+obj[i].name+"</option>");
}
},
"json"
);
}
function shi(id){
$.post(
"citys",
{id:id},
function(obj){
$("[name='qu_id']").empty();//每次追加清空
//追加一条请选择
$("[name='qu_id']").append("<option value=''>请选择</option>");
for(var i in obj){
$("[name='qu_id']").append("<option value='"+obj[i].id+"'>"+obj[i].name+"</option>");
}
},
"json"
);
}
</script>
<body>
<marquee>欢迎来到新增页面</marquee>
<center>
<form>
姓名:<input type="text" name="sname"><br>
性别:<input type="text" name="sex"><br>
地址:<input type="text" name="addr"><br>
名族:<select name="mid">
<option value="">请选择</option>
</select><br>
省:<select name="sheng_id" onchange="sheng(this.value)">
<option value="">请选择</option>
</select><br>
市:<select name="shi_id" onchange="shi(this.value)">
<option value="">请选择</option>
</select><br>
区:<select name="qu_id">
<option value="">请选择</option>
</select><br>
<input type="button" value="提交"><br>
</form>
</center>
</body>
控制层代码
@RequestMapping("/toadd2")
@ResponseBody
public Object toadd2() {
//查询两个部分 民族和省份
List<Minzu> minzus = ss.getMinzu();
int id=1;
List<City> citys = ss.getCity(id);
Map<String,Object> map = new HashMap();
map.put("minzus", minzus);
map.put("citys", citys);
return map;
}
@RequestMapping("/citys")
@ResponseBody
public Object citys(int id) {
List<City> citys = ss.getCity(id);
return citys;
}