jquery實現四級級聯下拉選單

開發環境

• jdk 1.7 tomcat7
• jquery-1.10
• 資料結構為單表通過parentid架構資料子父級關係

實現過程

• 通過ajax非同步獲取下拉選單的資料

intiSelect: function(parentCode){
   var result;
   $.ajax({
       url: _path,
       data: {"parentCode": parentCode},
       type: "post",
       dataType: "json",
       async: false,
       success: function (data) {
           result = data.myarray;
       }, error: function (data) {
           //console.log(data);
       }
   });
   return result;
}

• 將資料整合後顯示在對應的下拉選單中;並新增change事件,實現級聯效果

eventBind: function () {
    var that = this;
	//第一個下拉選單的父id為約定好的值
    var data = that.intiSelect('0');
    //console.log(data);//列印通過intiSelect方法獲取的資料
    var tempHtml = "<option value=\"\">請選擇</option>";
    if(data != null && data != ""){
        for (var i = 0; i < data.length; i++) {
            tempHtml += "<option value=\""+data[i].dropDownCode+"\">"+data[i].dropDownName+"</option>";
        }
    }
    //為第一個下拉選單新增html元素
    $("select[name='one']").html(tempHtml);
    //新增select的change事件
    $("select[name='one']").unbind('change').change(function (){
    	//觸發第二個下拉選單的change事件,達到級聯的效果
       that.secondChange($("select[name='one']").val(),'two','three','four');
    });
    });
},
secondChange: function(parentCode,name,sonName,sunzi){
    var that = this;
    $("select[name='"+name+"']").unbind('change').change(function (){
        //console.log("threeChange");
        that.threeChange($("select[name='"+name+"']").val(),sonName,sunzi);
    });
    if("" == parentCode){
        //清空
        $("select[name='"+name+"']").html("");
    }else{
        var data = this.intiSelect(parentCode);
        var tempHtml = "<option value=\"\">請選擇</option>";
        if(data != null && data != ""){
            for (var i = 0; i < data.length; i++) {
                tempHtml += "<option value=\""+data[i].dropDownCode+"\">"+data[i].dropDownName+"</option>";
            }
        }
        $("select[name='"+name+"']").html(tempHtml);
    }
}

總結

整體的思路就是通過第一個下拉選單的change事件觸發下一個下拉選單的change事件,直至最後一個下拉選單;除了最後一個和第一個下拉選單,其他下拉選單的處理可以抽成公共方法;