默认省的父级id为0 通过一系列jquery函数先实现三级联动,再进行回显
var cid=0;
$(function(){
$.post(
"citys",
{cid:cid},
function(obj){
for(var i in obj){
$("[name='c1']").append("<option value='"+obj[i].cid+"'>"+obj[i].cname+"</option>");
}
$("[name='c1']").val('${emp.c1}')
},
"json"
);
var c1= ${emp.c1}
$.post(
"city1",
{c1:c1},
function(obj){
for(var i in obj){
$("[name='c2']").append("<option value='"+obj[i].cid+"'>"+obj[i].cname+"</option>");
}
$("[name='c2']").val('${emp.c2}')
},
"json"
);
var c2 = ${emp.c2}
$.post(
"city2",
{c2:c2},
function(obj){
for(var i in obj){
$("[name='c3']").append("<option value='"+obj[i].cid+"'>"+obj[i].cname+"</option>");
}
$("[name='c3']").val('${emp.c3}')
},
"json"
);
})
以上第 一个为查询所有的省和省的回显 ,第二个和第三个为市和区的回显
//根据onchange改变事件查出所有的市
function getCity1(cid){
$.post(
"citys",
{cid:cid},
function(obj){
$("[name='c2']").empty();
$("[name='c2']").append("<option value=''>所属市</option>");
$("[name='c3']").empty();
$("[name='c3']").append("<option value=''>所属区</option>");
for(var i in obj){
$("[name='c2']").append("<option value='"+obj[i].cid+"'>"+obj[i].cname+"</option>");
}
},
"json"
);
}
//根据onchange改变事件查出所有的区
function getCity2(cid){
$.post(
"citys",
{cid:cid},
function(obj){
$("[name='c3']").empty();
$("[name='c3']").append("<option value=''>所属区</option>");
for(var i in obj){
$("[name='c3']").append("<option value='"+obj[i].cid+"'>"+obj[i].cname+"</option>");
}
},
"json"
);
}
</script>
</head>
<body>
<center>
<form>
ID:<input type="text" name="eid" readonly="readonly" value="${emp.eid }"><br>
姓名:<input type="text" name="ename" value="${emp.ename }"><br>
性别:<input type="radio" name="esex" value="男" ${emp.esex=='男'?'checked':'' }>男
<input type="radio" name="esex" value="女" ${emp.esex=='女'?'checked':'' }>女<br>
日期:<input type="text" name="edate" onclick="WdatePicker()" value="${emp.edate }"><br>
省: <select name="c1" onchange="getCity1(this.value)">改变事件
<option value="0">所属省</option>
</select><br>
市: <select name="c2" onchange="getCity2(this.value)">改变事件
<option value="0">所属市</option>
</select><br>
区: <select name="c3">
<option value="0">所属区</option>
</select><br>
</form>
</center>
</body>
</html>
controller层
三级联动的实现都用这一个分支解决
@RequestMapping("/citys")
@ResponseBody
public List citys(int cid) {
return empService.getCity(cid);
}
用于回显
@RequestMapping("/city1")
@ResponseBody
public List city1(int c1) {
return empService.getCity1(c1);
}
@RequestMapping("/city2")
@ResponseBody
public List city2(int c2) {
return empService.getCity2(c2);
}
查询对象
@RequestMapping("/tock")
public String tock(int eid,Model model) {
Emp emp = empService.getEmp(eid);
System.out.println("==="+emp);
model.addAttribute("emp", emp);
return "ck";
}
dao层
<select id="getCity" resultType="com.my.bean.City">
select * from city where pid=#{cid}
</select>
<select id="getCity1" resultType="com.my.bean.City">
select * from city where pid=#{c1}
</select>
<select id="getCity2" resultType="com.my.bean.City">
select * from city where pid=#{c2}
</select>
<select id="getEmp" resultType="com.my.bean.Emp">
select * from emp where eid=#{eid}
</select>