三级联动模拟筛选

css部分：

<style type="text/css">
    body {
        margin: 0px;
        padding: 0px;
    }
    .all {
        height: 300px;
        width: 90%;
        border: 1px solid #CCCCCC;
        margin: 0px auto;
        margin-top: 50px;
    }
    .memu {
        border: 1px solid #CCCCCC;
        height: 100%;
        width: 20%;
        float: left;
        overflow-y: auto;
    }
    .submenu {
        height: 20px;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #CCCCCC;
        cursor:pointer;
    }
    .show_t {
        height: 30px;
        width: 90%;
        border: 1px solid #CCCCCC;
        margin: 0px auto;
    }
</style>

html部分：

<div class="all">
    <div id="memu_1" class="memu">
        <div class="submenu" id="big_sort_0" onclick="javascript:submenu_onclick(this);">手机</div><div class="submenu" id="big_sort_1" onclick="javascript:submenu_onclick(this);">电视</div><div class="submenu" id="big_sort_2" onclick="javascript:submenu_onclick(this);">电脑</div><div class="submenu" id="big_sort_3" onclick="javascript:submenu_onclick(this);">家具</div><div class="submenu" id="big_sort_4" onclick="javascript:submenu_onclick(this);">笔记本</div><div class="submenu" id="big_sort_5" onclick="javascript:submenu_onclick(this);">显示器</div><div class="submenu" id="big_sort_6" onclick="javascript:submenu_onclick(this);">冰箱</div><div class="submenu" id="big_sort_7" onclick="javascript:submenu_onclick(this);">桌子</div><div class="submenu" id="big_sort_8" onclick="javascript:submenu_onclick(this);">电视</div><div class="submenu" id="big_sort_9" onclick="javascript:submenu_onclick(this);">鞋子</div><div class="submenu" id="big_sort_10" onclick="javascript:submenu_onclick(this);">衣服</div><div class="submenu" id="big_sort_11" onclick="javascript:submenu_onclick(this);">饰品</div><div class="submenu" id="big_sort_12" onclick="javascript:submenu_onclick(this);">食品</div><div class="submenu" id="big_sort_13" onclick="javascript:submenu_onclick(this);">饮料</div><div class="submenu" id="big_sort_14" onclick="javascript:submenu_onclick(this);">书籍</div></div>
    <div id="memu_2" class="memu" style="display: block;"><div class="submenu" id="foxpro_0" onclick="javascript:submenu_onclick_foxpro(this);">华为</div><div class="submenu" id="foxpro_1" onclick="javascript:submenu_onclick_foxpro(this);">小米</div><div class="submenu" id="foxpro_2" onclick="javascript:submenu_onclick_foxpro(this);">苹果</div><div class="submenu" id="foxpro_3" onclick="javascript:submenu_onclick_foxpro(this);">三星</div><div class="submenu" id="foxpro_4" onclick="javascript:submenu_onclick_foxpro(this);">诺基亚</div><div class="submenu" id="foxpro_5" onclick="javascript:submenu_onclick_foxpro(this);">锤子</div><div class="submenu" id="foxpro_6" onclick="javascript:submenu_onclick_foxpro(this);">oppo</div><div class="submenu" id="foxpro_7" onclick="javascript:submenu_onclick_foxpro(this);">红米</div><div class="submenu" id="foxpro_8" onclick="javascript:submenu_onclick_foxpro(this);">乐视</div><div class="submenu" id="foxpro_9" onclick="javascript:submenu_onclick_foxpro(this);">酷我</div><div class="submenu" id="foxpro_10" onclick="javascript:submenu_onclick_foxpro(this);">vivo</div><div class="submenu" id="foxpro_11" onclick="javascript:submenu_onclick_foxpro(this);">金立</div><div class="submenu" id="foxpro_12" onclick="javascript:submenu_onclick_foxpro(this);">摩托罗拉</div><div class="submenu" id="foxpro_13" onclick="javascript:submenu_onclick_foxpro(this);">酷派</div><div class="submenu" id="foxpro_14" onclick="javascript:submenu_onclick_foxpro(this);">中兴</div></div>
    <div id="memu_3" class="memu" style="display: block;"><div class="submenu" id="flyers_0" onclick="javascript:submenu_onclick_flyers(this);">小米</div><div class="submenu" id="flyers_1" onclick="javascript:submenu_onclick_flyers(this);">小米2</div><div class="submenu" id="flyers_2" onclick="javascript:submenu_onclick_flyers(this);">红米</div><div class="submenu" id="flyers_3" onclick="javascript:submenu_onclick_flyers(this);">小米2note</div><div class="submenu" id="flyers_4" onclick="javascript:submenu_onclick_flyers(this);">红米note</div><div class="submenu" id="flyers_5" onclick="javascript:submenu_onclick_flyers(this);">小米3</div><div class="submenu" id="flyers_6" onclick="javascript:submenu_onclick_flyers(this);">小米4</div><div class="submenu" id="flyers_7" onclick="javascript:submenu_onclick_flyers(this);">小米4增强</div><div class="submenu" id="flyers_8" onclick="javascript:submenu_onclick_flyers(this);">小米note</div><div class="submenu" id="flyers_9" onclick="javascript:submenu_onclick_flyers(this);">小米note增强</div><div class="submenu" id="flyers_10" onclick="javascript:submenu_onclick_flyers(this);">小米5</div></div>
</div>
<div class="show_t">
    您当前选择的是：<span id="memu_one">手机</span> <span id="memu_two">华为</span> <span id="memu_three">红米</span>
</div>

js部分：（此处需要引入jquery.js）

<script type="text/javascript">
    $(function() {
        $("#memu_2").hide();
        $("#memu_3").hide();
        stair_memu();
    });

    function stair_memu() {
        var memu_stair = $("#memu_1");
        var stair_array = ['手机', '电视', '电脑', '家具', '笔记本', '显示器', '冰箱', '桌子', '电视', '鞋子', '衣服', '饰品', '食品', '饮料', '书籍'];
        $.each(stair_array, function(i, val) {
            var innerhtml_memustair = $("<div class='submenu' id='big_sort_" + i + "' onclick='javascript:submenu_onclick(this);'>" + val + "</div>");
            memu_stair.append(innerhtml_memustair);
            i++;
        });
    }

    function foxpro_memu() {
        var memu_foxpro = $("#memu_2");
        var foxpro_array = ['华为', '小米', '苹果', '三星', '诺基亚', '锤子', 'oppo', '红米', '乐视', '酷我', 'vivo', '金立', '摩托罗拉', '酷派', '中兴'];
        $.each(foxpro_array, function(i, val) {
            var innerhtml_memufoxpro = $("<div class='submenu' id='foxpro_" + i + "' onclick='javascript:submenu_onclick_foxpro(this);'>" + val + "</div>");
            memu_foxpro.append(innerhtml_memufoxpro);
            i++;
        });
    }

    function flyers_memu() {
        var memu_flyers = $("#memu_3");
        var flyers_array = ['小米', '小米2', '红米', '小米2note', '红米note', '小米3', '小米4', '小米4增强', '小米note', '小米note增强', '小米5'];
        $.each(flyers_array, function(i, val) {
            var innerhtml_memuflyers = $("<div class='submenu' id='flyers_" + i + "' onclick='javascript:submenu_onclick_flyers(this);'>" + val + "</div>");
            memu_flyers.append(innerhtml_memuflyers);
            i++;
        });
    }

    function submenu_onclick(e) {
        $("#memu_2").show();
        $("#memu_one").text($(e).html());
        var memu_big_sortID = $(e).attr('id');
        console.log(memu_big_sortID);
        $("#memu_2").html("");
        foxpro_memu();
    }

    function submenu_onclick_foxpro(g) {
        $("#memu_3").show();
        $("#memu_two").text($(g).html());
        var memu_big_foxproID = $(g).attr('id');
        console.log(memu_big_foxproID);
        $("#memu_3").html("");
        flyers_memu();
    }

    function submenu_onclick_flyers(t) {
        $("#memu_3").show();
        $("#memu_three").text($(t).html());
        var memu_big_flyersID = $(t).attr('id');
        console.log(memu_big_flyersID);
    }
</script>