三级联动菜单

首先第一个菜单的信息是在后台就需要传递进来的，这里面指的是省的信息，一下是JSP页面，原理就是，第一个菜单onchange的时候，加载第二个人菜单的信息和第三个菜单的信息，当第二个菜单onchange的时候加载地三个菜单的信息
            <td  colspan="3">省：
        <select  style="width: 20%;" id="pre" onchange="chg(this);" >
            <option value="">请选择</option>
            <c:forEach items="${provonceList}" var="pre">
            <option value="${pre.provinceNo},${pre.unionProvinceNo}">${pre.provinceName}</option>

            </c:forEach>                </select>

市：
        <select  style="width: 20%;" id="city" name="merchantInfo.cityCode" onchange="chg2(this);" >
        <option value="">请选择</option>
        </select>
区：
        <select  style="width: 20%;" name="merchantInfo.areaCode" id="area">
        <option value="">请选择</option>
        </select>

        </td>

// 选择省的事件（适用于省市县三级联动）
function chg(obj) {
// 如果省选择的是“”请选择“”清空后面两级菜单的内容
var cityEle = document.getElementById("city");
var areaEle = document.getElementById("area");
    if (obj.value == -1) {
        cityEle.options.length = 0;
        areaEle.options.length = 0;
    }
    //获取选中的省
    var preId = obj.value;
    //根据选中的省查询城市 
   var firstCity = getCity(preId,"city");

}

 // 根据省的ID查询市
function getCity(preId,type) {

var cityEle = document.getElementById(type);

var preId0 = preId.split(",")[0];//得到第一个省
//先清空市
    cityEle.options.length = 0;
    $.ajax({
type: 'post',
url: "/merchant/getCityByProNo",
dataType : 'json',
async: false,
data:{
preId:preId0
},
success: function(result) {
for (var i = 0; i < result.length; i++) {
if (i == 0) {
// 初始化地区
getArea(result[i].cityNo);
}
//循环生成市的选择列表
                var op = new Option(result[i].cityName, result[i].cityNo);
                cityEle.options.add(op);
            }
},
error:function(){
alert("发生错误");
}
});

}

 // 根据城市的ID查询地区
function getArea(cityNo) {
var areaEle = document.getElementById("area");

//先清空地区
    areaEle.options.length = 0;
    $.ajax({
type: 'post',
url: "/merchant/getAreaByCityNo",
dataType : 'json',
async: false,
data:{
cityNo:cityNo
},
success: function(result) {
for (var i = 0; i < result.length; i++) {
var ar = result[i].areaNo+","+result[i].unionAreaNo;
                var op = new Option(result[i].areaName, ar);
                areaEle.options.add(op);
            }
},
error:function(){
alert("发生错误");
}
});

}

// 选择地区（县）的事件
function chg2(obj) {
    var val = obj.value;
    //查询地区
    getArea(val);
}