用ajax来实现简单的二级联动,页面只截取了简单的部分:
<div class="content_group">
<div class="span3">
<label class="control-label">省份:</label>
<div class="controls">
<select id="proId">
<option value="0">请选择:</option>
<c:forEach var="app" items="${proList }">
<option value="${app.proId }" >${app.name }</option>
</c:forEach>
</select>
</div>
</div>
<div class="span3">
<label class="control-label">市级:</label>
<div class="controls">
<select id="cityId">
<option value="0">请先选择省份</option>
</select>
</div>
</div>
</div>
流程大概就是页面在加载的时候,会遍历proList,将所有的省份列举出来,value值对应的是省份的id,然后给
id为proId的下拉框绑定change()时间,根据省份id获取市级列表,然后添加到下面的下拉列表中。
1.为主下拉列表绑定change()事件
js代码:
$(function() {
$("#proId").change(function() {
showItems();
});
});
2.change()一旦触发,就更改二级下拉列表的内容
js代码:
function showItems() {
var proId = $("#proId > option:selected").val();
//当主下拉列表不选择时,二级列表应该清空内容并给予提示。
if(proId==0){
var cityId = $("#cityId").html("");
cityId.append("<option value='0'>请先选择省份</option>");
return;
}
//如果主下拉列表有值,就发送ajax请求
$.ajax({
url:$path+"/pro/showCity.do?",
type:"post",
dataType:"json",
data:{
"proId":proId
},
success:function(result){
//如果获取到成功的状态码,就将集合中的元素遍历出来,添加到二级下拉列表中
if (result.code == '200') {
var cityList = result.data;
//需要注意:每次主下拉列表重新选择省份,都要先清空二级下拉列表
var cityId = $("#cityId").html("");
for(var i=0, len=cityList.length;i<len;i++){
cityId.append("<option value='"+cityList[i].cityId+"'>"+cityList[i].name+"</option>");
}
}
}
})
}
主要涉及到的知识点:jquery的append()方法,以及html(),还有使用js遍历数组的方式。
链接:使用js遍历数组的几种方式:http://www.cnblogs.com/yxwkf/p/5206603.html