js 多级联动（省、市、区）

js 多级联动（省、市、区）

CreateTime--2018年4月9日17:10:38

Author:Marydon

方式一：

　　数据从数据库获取，ajax实现局部刷新

方式二：

　　数据从json文件获取，ajax实现局部刷新

以方式二为例，进行演示（省市区三级联动）

前提：需要有省、市、区三个的数据封装文件

代码实现

　　1.自封装函数

/**
 * 多级联动
 */
function MultipleCascades() {
    
    var containerId = "";
    var num = "";
    var textArray = "";
    
    // 参数初始化
    this.init = function(initParams) {
        if (!initParams) return;
        
        containerId = initParams['containerId'];
        num = initParams['selectNum'];
        textArray = initParams['textDescraption'];
        
        for (var i = 1; i <= num; i++) {
            var selectId = "linkage" + i;
            this.selectFactory(selectId,textArray[i-1]);
        }
    };
    
    // 创建select标签
    this.selectFactory = function(id,text) {
        // 创建文本提示
        var spanElement = document.createElement('span');
        spanElement.className = "textBox";
        spanElement.innerHTML = text;
        $('#' + containerId).append(spanElement);
        
        // 创建select标签
        var selectElement = document.createElement('select');
        selectElement.id = id;
        selectElement.className = "selectStyle";
        // 给select标签填充空的option标签
        var optionElement = document.createElement('option');
        optionElement.value = "";
        optionElement.innerHTML = "--请选择--";
        selectElement.appendChild(optionElement);
        
        $('#' + containerId).append(selectElement);
    };
    
    // select标签绑定onchange事件
    this.bindChangeEvent = function(selectId,setData) {
        
        $('#' + selectId).change(function () {
            var j = parseInt(selectId.substring(7)) + 1;
            // 将本select标签和它后面的联动标签移除掉
            for (;j <= num; j++) {
                $('#linkage' + j + ' option:gt(0)').remove();
            }
            
            var selectValue = $('#' + selectId).val();
            if (!selectValue) return;
            setData();
        });
        
    }           
};

　　HTML片段

<div id="selectContainer"></div>

　　2.调用

　　方法一：

$(function(){
    var mc = new MultipleCascades();
    mc.init({
        'containerId':'selectContainer',
        'selectNum':3,
        'textDescraption':['省：','市：','区：']
    });
    
     // 2.获取省份信息
    $.getJSON("json/province.json",function(provinces){
        var optionTags = "";
        $(provinces).each(function(index,obj){
            optionTags += "<option value=" + obj.id + ">" + obj.name + "</option>";
        });
        $('#linkage1').append(optionTags);
    });
     
     
     mc.bindChangeEvent('linkage1',function(){
         
         var provinceId = $('#linkage1').val();
         // 获取城市信息
        $.getJSON("json/city.json",function(cities){
            var optionTags = "";
            
            $(cities[provinceId]).each(function(index,obj){
                optionTags += "<option value=" + obj.id + ">" + obj.name + "</option>";
            });
            $('#linkage2').append(optionTags);
        });
     });
     
     mc.bindChangeEvent('linkage2',function(){
         var cityId = $('#linkage2').val();
         // 获取区（县）信息
        $.getJSON("json/area.json",function(areas){
            var optionTags = "";
            areas[cityId].forEach(function(obj){
                optionTags += "<option value=" + obj.id + ">" + obj.name + "</option>";    
            });
            $('#linkage3').append(optionTags);
        });
     });
    
    
});

　　方法二：

$(function(){
    var mc = new MultipleCascades();
    mc.init({
        'containerId':'selectContainer',
        'selectNum':3,
        'textDescraption':['省：','市：','区：']
    });
    
     // 2.获取省份信息
    $.getJSON("json/province.json",function(provinces){
        var optionTags = "";
        $(provinces).each(function(index,obj){
            optionTags += "<option value=" + obj.id + ">" + obj.name + "</option>";
        });
        $('#linkage1').append(optionTags);
    });
     
     // 绑定onchange事件
    $('#linkage1').change(function(){
        // 1.移除市和区的下拉选项
        $('#linkage2 option:gt(0)').remove();
        $('#linkage3 option:gt(0)').remove();
        var provinceId = $(this).val();
        if (!provinceId) return;
        // 2.获取城市信息
        $.getJSON("json/city.json",function(cities){
            var optionTags = "";
            $(cities[provinceId]).each(function(index,obj){
                optionTags += "<option value=" + obj.id + ">" + obj.name + "</option>";
            });
            $('#linkage2').append(optionTags);
        });
        
    });
    $('#linkage2').change(function(){
        $('#linkage3 option:gt(0)').remove();
        var cityId = $(this).val();
        if (!cityId) return;
        // 获取区（县）信息
        $.getJSON("json/area.json",function(areas){
            var optionTags = "";
            areas[cityId].forEach(function(obj){
                optionTags += "<option value=" + obj.id + ">" + obj.name + "</option>";    
            });
            $('#linkage3').append(optionTags);
        });
    });
    
});

区别：在于方法一又对onchange事件进行了封装。

效果展示：

说明：

使用我封装好的方法，具有良好的迁移性，操作简单，只需要在页面上放一个带有ID的div即可；

可创建指定级别联动；

select标签及前面的文字都设置了class，可自定义设置CSS样式；

其他实现方式已经写好。