JQuery_用ajax实现二级联动

用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