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事件,直至最后一个下拉列表;除了最后一个和第一个下拉列表,其他下拉列表的处理可以抽成公共方法;

本文地址：https://blog.csdn.net/qq_39425564/article/details/110956075