jsp代碼:
<script type='text/javascript'
src='<%=basePath%>dwr/interface/areaDwr.js'></script>
<script type='text/javascript' src='<%=basePath%>dwr/engine.js'></script>
<script type='text/javascript' src='<%=basePath%>dwr/util.js'></script>
<script type="text/javascript" src="<%=basePath%>js/jquery-1.4.2.js"></script>
<script type="text/javascript">
//省級連動
function changeArea(obj){
temSpan=$("#thirdSelect");
tempSelect=$("<select name='country' id='select7'></select>");
var fatherId=obj.value;
var secondId;
var thirdId;
dwr.engine.setAsync(false);
areaDwr.findAllChildren(fatherId,function(data){
if(data!=null){
secondId=data[0].areaid;
var secondSelect=$("#select6").html("");
for(var i=0;i<data.length;i++){
var temp=$("<option value="+data[i].areaid+">"+data[i].areaname+"</option>");
temp.appendTo(secondSelect);
}
}
}
);
areaDwr.findAllChildren(secondId,function(data){
if(data.length>0){
if(document.getElementById("select7")==null){
temSpan.append(tempSelect);
}
$("#select7").css("display","inline-block");
var secondSelect=$("#select7");
for(var i=0;i<data.length;i++){
var temp=$("<option value="+data[i].areaid+">"+data[i].areaname+"</option>");
temp.appendTo(secondSelect);
}
}else{
$("#select7").html("").css("display","none");
}
}
);
dwr.engine.setAsync(true);
}
//市級連動
function secondChange(obj){
var fatherId=obj.value;
areaDwr.findAllChildren(fatherId,function(data){
if(data.length>0){
if(document.getElementById("select7")==null){
temSpan.append(tempSelect);
}
$("#select7").css("display","inline-block");
var secondSelect=$("#select7").html("");
for(var i=0;i<data.length;i++){
var temp=$("<option value="+data[i].areaid+">"+data[i].areaname+"</option>");
temp.appendTo(secondSelect);
}
}else{
$("#select7").html("").css("display","none");
}
}
);
}
</script>
選擇框:
<td colspan="2" align="left" bgcolor="eff3f6">
<select name="province" id="select5"
onchange="changeArea(this)">
<c:forEach items="${fatherAreas }" var="fatherArea">
<c:choose>
<c:when test="${fatherArea.areaid==member.extcredits1}">
<option value="${fatherArea.areaid }" selected="selected">
${fatherArea.areaname }
</option>
</c:when>
<c:otherwise>
<option value="${fatherArea.areaid }">
${fatherArea.areaname }
</option>
</c:otherwise>
</c:choose>
</c:forEach>
</select>
<select name="city" id="select6" onchange="secondChange(this)">
<c:forEach items="${firstAreas }" var="firstArea">
<c:choose>
<c:when test="${firstArea.areaid==member.extcredits2}">
<option value="${firstArea.areaid }" selected="selected">
${firstArea.areaname }
</option>
</c:when>
</c:choose>
<option value="${firstArea.areaid }">
${firstArea.areaname }
</option>
</c:forEach>
</select>
<span id="thirdSelect">
</span>
<c:if test="${secondAreas!=null}">
<select name="country" id="select7">
<c:forEach items="${secondAreas}" var="secondArea">
<c:choose>
<c:when test="${secondArea.areaid==member.extcredits3}">
<option value="${secondArea.areaid }"
selected="selected">
${secondArea.areaname }
</option>
</c:when>
<c:otherwise>
<option value="${secondArea.areaid }">
${secondArea.areaname }
</option>
</c:otherwise>
</c:choose>
</c:forEach>
</select>
</c:if>
java后臺代碼:
/**
* 查詢父節(jié)點下面的所有的子節(jié)點
*/
public List<Area> findAllChildren(Integer fatherId) {
List<Area> areas=areaService.findAllChildren(fatherId);
return areas;
}
表結構是樹形結構:北京市 下朝陽區(qū)
河北省 下 石家莊市 等.
one to many 結構.