纯H5实现二级联动，三级联动，包括搜索功能（jq）

1.先来看看二级联动吧（话不多说，直接上代码）
来一段html代码

    
    
    
    
    
    
    
    
    
    
    
    


    

        
        

            

                
丽水
                
                
                
                    
                
            
            

                
                
            
        
        
所有门店
        

            

                
            
        
        


    

   



    
    
   
    
    
   

再来段css

  /* 受理门店查询 */
  .shop-box {
    width: 100%;
    height: auto;
    background: url(../images/shop-bg.png) 0 0 no-repeat;
    background-size: 100% 100%;
  }
  
  .shop-content {
    width: 94%;
    min-height: 14rem;
    padding: 10%;
    margin: 0 auto;
    background: #fff;
    border-radius: .4rem;
  }

  .shop-position {
    display: flex;
    justify-content: space-between;
  }

  .shop-position select {
    outline: none;
    width: 48%;
    height: 1rem;
    line-height: 1rem;
    padding-left: 17%;
    border-radius: .2rem;
    background: rgba(204, 204, 204,.3);
    color: #b0afaf;
    font-size: .34rem;
    border: 1px solid #ccc;
  }

  .shop-position>div {
    outline: none;
    width: 48%;
    height: 1rem;
    line-height: 1rem;
    padding-left: 19%;
    border-radius: .2rem;
    background: rgba(204, 204, 204,.3);
    color: #b0afaf;
    font-size: .34rem;
    border: 1px solid #ccc;
  }

  .shop-search {
    width: 100%;
    height: 1rem;
    position: relative;
    margin-top: .3rem;
  }

  .shop-search input {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: .2rem;
    border: 1px solid #ccc;
    text-align: center;
    letter-spacing: 0.05rem;
  }

  .shop-search span {
    position: absolute;
    width: .9rem;
    height: .9rem;
    right: 0.1rem;
    top: .1rem;
    z-index: 2;
  }

  .shop-list {
    margin-top: .5rem;
  }

  .shop-list li {
    width: 96%;
    padding: 2%;
    box-shadow: 0 0 .1rem #949494;
    border-radius: .2rem;
    margin-bottom: .2rem;
  }

  .shop-list li .shop-home,
  .shop-list li .shop-address {
    display: flex;
    align-items: center;
    color: #4c4b4d;
    font-size: .36rem;
  }

  .shop-list li .shop-home img,
  .shop-list li .shop-address img {
    width: .44rem;
    text-align: left
  }

  .shop-list li .shop-home span,
  .shop-list li .shop-address span {
    padding-left: .2rem;
  }

  .shop-list li .shop-address {
    margin-top: .2rem;
  }

最后上js

var dataList = [];
//拿出默认的列表
var liandu = [];
//删除除了莲都的列表
var noliandu = [];
$.ajax({
    type: 'POST',
    url: '/ls-activity/front/replacement/getAllChannel',
    async: false,
    // contentType: "application/json",
    success:function(data) {
        var data = JSON.parse(data);
        //默认选择所有的列表
        if(data.code == '0') {
            dataList = data.data;
            for(var i = 0;i < dataList.length;i++) {
                if((dataList[i].county).indexOf("莲都") != -1) {
                    liandu.push(dataList[i])
                    console.log(111)
                }else {
                    noliandu.push(dataList[i])
                }
            }
            console.log(dataList)
            console.log(noliandu)
            var list0 = ''
            for(var i = 0;i < liandu.length;i++) {
                list0 += '
区县' + liandu[i].county + '
地址' + liandu[i].detaddress + '
电话' + liandu[i].contmobile + '
渠道名' + liandu[i].storename + '
'+'
'              
                
            }
            $('.shop-list').html('');
            $('.shop-list').append(list0);
            $("#search").click(function() {
                var searchVal = $('#searchInput').val();//查询关键字
                var serList = [];
                var serWordList = ''
                console.log(searchVal)
                for(var i = 0;i < liandu.length;i++) {
                    if(liandu[i].storename.indexOf(searchVal) != -1 || liandu[i].detaddress.indexOf(searchVal) != -1) {
                        serList.push(liandu[i]);
                    }             
                }
                console.log(serList)
                for(var m = 0;m < serList.length;m++) {   
                    serWordList += '
区县' + serList[m].county + '
地址' + serList[m].detaddress + '
电话' + serList[m].contmobile + '
渠道名' + serList[m].storename + '
'+'
'                       
                }
                $('.shop-list').html('');
                if(serList == [] || serList == '' || serList.length == 0) {
                    $('.shop-list').attr('id', 'change-html')
                    $('#change-html').css({'font-size': '.44rem','text-align': 'center','color': '#666'})
                    $('.shop-list').html('对不起，暂无查询结果');
                }else {
                    $('.shop-list').html('');
                    $('.shop-list').append(serWordList);    
                } 
            })
        }else {
            $('.shop-list').html('对不起，暂无数据');
        }
        
    }
})

var iNum1;
var iNum2;
var hash = {};
var i = 0;
//一级
var res = [];
var arr0 = [];
console.log(noliandu)
noliandu.forEach(function(item) {
    var county = item.county;
    hash[county] ? res[hash[county] - 1].area.push(item.area) : hash[county] = ++i && res.push({
        county: county,
        area: [item.area],
    })
});
//二级
let result = noliandu.reduce((result, item) => {
    let index = result.findIndex(v => v.county === item.county);
    let {county,...single} = item;
    if (index === -1) {
    result.push({county,goods_list:[single]});
    } else {
    result[index].goods_list.push(single);
    }
    return result;
    }, []);
    console.log(result)
//三级
let result2 = noliandu.reduce((result2, item) => {
    let index = result2.findIndex(v => v.area === item.area);
    let {county,area,...single} = item;
    if (index === -1) {
    result2.push({county,area,goods_list:[single]});
    } else {
    result2[index].goods_list.push(single);
    }
    return result2;
    }, []);

// 传入一个数组
// 按照特定方式格式化
var _arr = [],//三级处理
_t = [],
// 临时的变量
_tmp;
function sortArr(arr, str) {
    // 按照特定的参数将数组排序将具有相同值得排在一起
    arr = arr.sort(function(a, b) {
        var s = a[str],
            t = b[str];
 
        return s < t ? -1 : 1;
    });
 
    if ( arr.length ){
        _tmp = arr[0][str];
    }
    // 将相同类别的对象添加到统一个数组
    for (var i in arr) {
        if ( arr[i][str] === _tmp ){
            _t.push( arr[i] );
        } else {
            _tmp = arr[i][str];
            _arr.push( _t );
            _t = [arr[i]];
        }
    }
    // 将最后的内容推出新数组
    _arr.push( _t );
    return _arr;
}
sortArr( result2, 'county');
console.log(result)

    // console.log(result2);
var areaHtm = '莲都';
for(var i=0;i'
}
$('#areas').append(areaHtm);
$('#areas').change(function () {
    var options=$("#areas option:selected");  //获取选中的项
    var list0 = '';
    $("#search").click(function() {
        var searchVal = $('#searchInput').val();//查询关键字
        var serList = [];
        var serWordList = ''
        console.log(searchVal)
        for(var i = 0;i < result.length;i++) {
            if(result[i].county == options.val()) {
                for(var j = 0;j < result[i].goods_list.length;j ++) {
                    if((result[i].goods_list[j]).storename.indexOf(searchVal) != -1 || (result[i].goods_list[j]).detaddress.indexOf(searchVal) != -1) {
                        serList.push(result[i].goods_list[j]);
                    }             
                }        
            }else if(options.val() == '0') {
                for(var i = 0;i < liandu.length;i++) {
                    if(liandu[i].storename.indexOf(searchVal) != -1 || liandu[i].detaddress.indexOf(searchVal) != -1) {
                        serList.push(liandu[i]);
                    }             
                }
            }          
        }
        console.log(serList)
        for(var m = 0;m < serList.length;m++) {   
            serWordList += '
区县' + options.val() + '
地址' + serList[m].detaddress + '
电话' + serList[m].contmobile + '
渠道名' + serList[m].storename + '
'+'
'                       
        }
        $('.shop-list').html('');
        if(serList == [] || serList == '' || serList.length == 0) {
            $('.shop-list').attr('id', 'change-html')
            $('#change-html').css({'font-size': '.44rem','text-align': 'center','color': '#666'})
            $('.shop-list').html('对不起，暂无查询结果');
        }else {
            $('.shop-list').html('');
            $('.shop-list').append(serWordList);    
        } 
    })
    for(var i = 0;i < result.length;i++) {
        if(result[i].county == options.val()) {
            for(var j = 0;j < result[i].goods_list.length;j ++) {   
                list0 += '
区县' + result[i].county + '
地址' + (result[i].goods_list)[j].detaddress + '
电话' + (result[i].goods_list)[j].contmobile + '
渠道名' + (result[i].goods_list)[j].storename + '
'+'
'            
            }        
        } else if(options.val() == '0') {
            for(var i = 0;i < liandu.length;i++) {
                list0 += '
区县' + liandu[i].county + '
地址' + liandu[i].detaddress + '
电话' + liandu[i].contmobile + '
渠道名' + liandu[i].storename + '
'+'
'              
                
            }
        }           
    }

    $('.shop-list').html('');
    $('.shop-list').append(list0);
})

$('#searchInput').focus(function() {
    $('#searchInput').val('')
})

function blurIn() {
    window.scroll(0, 0);
}

在这里解释一下哈，后台接口返回的只有数据，处理都是前端来的
返回数据的格式我这边是这样的：
var data = {“code”:“0”,“data”:[{“area”:"",“contmobile”:“18205788982”,“county”:“丽水”,“detaddress”:“城北街489号”,“id”:“49139f624fa74ff29981b93f73faaa83”,“storename”:“丽水市莲都区九九果粉通讯经营部（99）”},{“area”:"",“contmobile”:“13957048300”,“county”:“莲都”,“detaddress”:“城北街490号”,“id”:“94ac0d01edc543d2b304c16a9f905a3e”,“storename”:“丽水市莲都区卓宏通讯器材店”},{“area”:"",“contmobile”:“18867839000”,“county”:“莲都”,“detaddress”:“城北街512号”,“id”:“ffae8506a4ac4b369a0d466b89f60b1e”,“storename”:“丽水市莲都区至一诚通讯器材经营部（至诚）”}]}；

2.三级联动
js代码块

var dataList = [];
$.ajax({
    type: 'POST',
    url: '/zs-activity/front/replacement/getAddress',
    async: false,
    // contentType: "application/json",
    success:function(data) {
        var data = JSON.parse(data);
        dataList = data.data;
        console.log(dataList)
        if(data.rtnCode == '000') {
            var list0 = ''
            for(var i = 0;i < dataList.length;i++) {
                list0 += '
' +
                            '
' +
                                '' +
                                ''+ dataList[i].storename +'' +
                            '
' +
                            '
' +
                                '' +
                                ''+ dataList[i].detaddress +'' +
                            '
' +
                        '
'              
                
            }
            $('.shop-list').html('');
            $('.shop-list').append(list0);
            $("#search").click(function() {
                var searchVal = $('#searchInput').val();//查询关键字
                var serList = [];
                var serWordList = ''
                console.log(searchVal)
                for(var i = 0;i < dataList.length;i++) {
                    if(dataList[i].storename.indexOf(searchVal) != -1 || dataList[i].detaddress.indexOf(searchVal) != -1) {
                        serList.push(dataList[i]);
                    }             
                }
                console.log(serList)
                for(var m = 0;m < serList.length;m++) {
                    serWordList += '
' +
                                '
' +
                                    '' +
                                    ''+ serList[m].storename +'' +
                                '
' +
                                '
' +
                                    '' +
                                    ''+ serList[m].detaddress +'' +
                                '
' +
                            '
'                          
                }
                $('.shop-list').html('');
                if(serList == [] || serList == '' || serList.length == 0) {
                    $('.shop-list').attr('id', 'change-html')
                    $('#change-html').css({'font-size': '.44rem','text-align': 'center','color': '#666'})
                    $('.shop-list').html('对不起，暂无查询结果');
                }else {
                    $('.shop-list').html('');
                    $('.shop-list').append(serWordList);    
                } 
            })
        }
        
    }
})
console.log(dataList)
var iNum1;
var iNum2;
var hash = {};
var i = 0;
//一级
var res = [];
var arr0 = [];
dataList.forEach(function(item) {
    var county = item.county;
    hash[county] ? res[hash[county] - 1].area.push(item.area) : hash[county] = ++i && res.push({
        county: county,
        area: [item.area],
    })
});
//二级
let result = dataList.reduce((result, item) => {
    let index = result.findIndex(v => v.county === item.county);
    let {county,...single} = item;
    if (index === -1) {
    result.push({county,goods_list:[single]});
    } else {
    result[index].goods_list.push(single);
    }
    return result;
    }, []);
//三级
let result2 = dataList.reduce((result2, item) => {
    let index = result2.findIndex(v => v.area === item.area);
    let {county,area,...single} = item;
    if (index === -1) {
    result2.push({county,area,goods_list:[single]});
    } else {
    result2[index].goods_list.push(single);
    }
    return result2;
    }, []);

// 传入一个数组
// 按照特定方式格式化
var _arr = [],//三级处理
_t = [],
// 临时的变量
_tmp;
function sortArr(arr, str) {
    // 按照特定的参数将数组排序将具有相同值得排在一起
    arr = arr.sort(function(a, b) {
        var s = a[str],
            t = b[str];
 
        return s < t ? -1 : 1;
    });
 
    if ( arr.length ){
        _tmp = arr[0][str];
    }
    // 将相同类别的对象添加到统一个数组
    for (var i in arr) {
        if ( arr[i][str] === _tmp ){
            _t.push( arr[i] );
        } else {
            _tmp = arr[i][str];
            _arr.push( _t );
            _t = [arr[i]];
        }
    }
    // 将最后的内容推出新数组
    _arr.push( _t );
    return _arr;
}
sortArr( result2, 'county');
console.log(_arr)

//一级遍历
for(var i=0;i'+res[i].county+'');
}

//二级遍历
$('#county').change(function () {
    $('#areas').children().remove();
    iNum1 = $("#county option:selected").index();
    var aaCity = Array.from(new Set(res[iNum1-1].area))
    var areaHtm = '请选择';
    for(var j=0;j'+aaCity[j]+''
    }
    $('#areas').html(areaHtm);
    var options1=$("#county option:selected");  //获取选中的项
    var options2=$("#areas option:selected");  //获取选中的项
    var list0 = '';
    $("#search").click(function() {
        var searchVal = $('#searchInput').val();//查询关键字
        var serList = [];
        var serWordList = ''
        console.log(searchVal)
        for(var i = 0;i < result.length;i++) {
            if(result[i].county == options1.val()) {
                for(var j = 0;j < result[i].goods_list.length;j ++) {
                    if((result[i].goods_list[j]).storename.indexOf(searchVal) != -1 || (result[i].goods_list[j]).detaddress.indexOf(searchVal) != -1) {
                        serList.push(result[i].goods_list[j]);
                    }             
                }        
            }            
        }
        console.log(serList)
        for(var m = 0;m < serList.length;m++) {
            serWordList += '
' +
                        '
' +
                            '' +
                            ''+ serList[m].storename +'' +
                        '
' +
                        '
' +
                            '' +
                            ''+ serList[m].detaddress +'' +
                        '
' +
                    '
'                          
        }
        $('.shop-list').html('');
        if(serList == [] || serList == '' || serList.length == 0) {
            $('.shop-list').attr('id', 'change-html')
            $('#change-html').css({'font-size': '.44rem','text-align': 'center','color': '#666'})
            $('.shop-list').html('对不起，暂无查询结果');
        }else {
            $('.shop-list').html('');
            $('.shop-list').append(serWordList);    
        } 
    })
    for(var i = 0;i < result.length;i++) {
        if(result[i].county == options1.val()) {
            for(var j = 0;j < result[i].goods_list.length;j ++) {
                list0 += '
' +
                            '
' +
                                '' +
                                ''+ (result[i].goods_list)[j].storename +'' +
                            '
' +
                            '
' +
                                '' +
                                ''+ (result[i].goods_list)[j].detaddress +'' +
                            '
' +
                        '
'                
            }        
        }            
    }

    $('.shop-list').html('');
    $('.shop-list').append(list0);
})

//三级遍历
$('#areas').change(function () {
    $('#shop-list').children().remove();
    iNum2 = $(this).children('option:selected').index();
    // var aaCountry2 = _arr[iNum1-1][iNum2-1].goods_list;
    // var aaCountry3 = _arr[iNum1-1][iNum2-1].county;
    // var aaCountry4 = _arr[iNum1-1][iNum2-1].area;
    var options1=$("#county option:selected");  //获取选中的项
    var options2=$("#areas option:selected");  //获取选中的项
    console.log(options2.val())
    var list0 = '';
    $("#search").click(function() {
        var searchVal = $('#searchInput').val();//查询关键字
        var serWordList = ''
        var serList = [];
        var serList = [];
        console.log(searchVal)
        for(var i = 0;i < result.length;i++) {
            if(result[i].county == options1.val() && options2.val() == '0') {
                for(var j = 0;j < result[i].goods_list.length;j ++) {
                    if((result[i].goods_list[j]).storename.indexOf(searchVal) != -1 || (result[i].goods_list[j]).detaddress.indexOf(searchVal) != -1) {
                        serList.push(result[i].goods_list[j]);
                    }                
                }        
            }            
        }
        for(var i = 0;i < _arr.length;i++) {
            for(var m = 0;m < _arr[i].length;m++) {
                if(_arr[i][m].county == options1.val() && _arr[i][m].area == options2.val()) {
                    for(var j = 0;j < _arr[i][m].goods_list.length;j ++) {
                        console.log((_arr[i][m].goods_list)[j].storename)
                        var name2 = (_arr[i][m].goods_list)[j].storename;
                        var address2 = (_arr[i][m].goods_list)[j].storename;
                        if(name2.indexOf(searchVal) != -1 || address2.indexOf(searchVal) != -1) {
                            serList.push((_arr[i][m].goods_list)[j])
                        }
                    }
                }
            }
        }

            for(var m = 0;m < serList.length;m++) {
                serWordList += '
' +
                            '
' +
                                '' +
                                ''+ serList[m].storename +'' +
                            '
' +
                            '
' +
                                '' +
                                ''+ serList[m].detaddress +'' +
                            '
' +
                        '
'                          
            }
            $('.shop-list').html('');
            if(serList == [] || serList == '' || serList.length == 0) {
                $('.shop-list').attr('id', 'change-html')
                $('#change-html').css({'font-size': '.44rem','text-align': 'center','color': '#666'})
                $('.shop-list').html('对不起，暂无查询结果');
            }else {
                $('.shop-list').html('');
                $('.shop-list').append(serWordList);    
            }             

    })
    for(var i = 0;i < result.length;i++) {
        if(result[i].county == options1.val() && options2.val() == '0') {
            for(var j = 0;j < result[i].goods_list.length;j ++) {
                list0 += '
' +
                            '
' +
                                '' +
                                ''+ (result[i].goods_list)[j].storename +'' +
                            '
' +
                            '
' +
                                '' +
                                ''+ (result[i].goods_list)[j].detaddress +'' +
                            '
' +
                        '
'                
            }        
        }            
    }
    for(var i = 0;i < _arr.length;i++) {
        for(var m = 0;m < _arr[i].length;m++) {
            if(_arr[i][m].county == options1.val() && _arr[i][m].area == options2.val()) {
                for(var j = 0;j < _arr[i][m].goods_list.length;j ++) {
                    console.log((_arr[i][m].goods_list)[j].storename)
                    list0 += '
' +
                                '
' +
                                    '' +
                                    ''+ (_arr[i][m].goods_list)[j].storename +'' +
                                '
' +
                                '
' +
                                    '' +
                                    ''+ (_arr[i][m].goods_list)[j].detaddress +'' +
                                '
' +
                            '
'                
                }        
            }      
        }
    }

    $('.shop-list').html('');
    $('.shop-list').append(list0);
})

$('#searchInput').focus(function() {
    $('#searchInput').val('')
})

function blurIn() {
    window.scroll(0, 0);
}