js省市县三级联动下拉列表的示例

html代码 三个下拉列表
<select id = "province" onchange ="selectOnChange(this.options[this.options.selectedIndex].value,'city')">
<c:choose>
<c:when test="${not empty areaList}">
 <c:forEach items="${areaList}" var="var" varStatus="vs">
 <option value="${var.ID}" >
 ${var.AREANAME}
 </option>
</c:forEach>

</c:when>
</c:choose>

</select>

<select id = "city" onchange ="selectOnChange(this.options[this.options.selectedIndex].value,'county')">

</select>

<select id = "county">

</select>

JS代码
 function selectOnChange(SelId,toSelId){
//document.getElementById(toSelId).innerHTML="";

$.ajax({
url:"<%=basePath%>medium/findAreaByParentId.do",
type:"post",
cache: false,
data:"PARENTID="+SelId,
dataType:"json",
success : function(data){

  createSelectObj(data.dataList,toSelId);

  if(toSelId == "city"){ //当是省级下拉列表调用这个方法时 需要再模仿市级下拉列表调用一次

  var val = document.getElementById(toSelId);

  var index = val.selectedIndex;

  var aa = val.options[index].value;

  //var aa = val.options[val.options.selectedIndex].value;

  selectOnChange(aa,"county");

  }
},
error:function(XMLHttpRequest, textStatus, errorThrown) {

                    alert(XMLHttpRequest.status);  

                    alert(XMLHttpRequest.readyState);  

                    alert(textStatus);  
 
}  
});
}

function createSelectObj(arr,toSelId) {

if (arr != null && arr.length > 0) {
var obj = document.getElementById(toSelId);
obj.innerHTML = "";
for ( var o in arr) {
var op = document.createElement("option");
op.setAttribute("value", arr[o].ID);
//op.text=arr[o].name;//这一句在ie下不起作用，用下面这一句或者innerHTML
op.appendChild(document.createTextNode(arr[o].AREANAME));
obj.appendChild(op);

}
}
else{
var obj = document.getElementById(toSelId);
obj.innerHTML = "";
var op = document.createElement("option");
op.setAttribute("value", "");
op.appendChild(document.createTextNode("暂无"));
obj.appendChild(op);
}

}

Java代码
查询数据库返回一个省市县区List