三级联动模拟筛选

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>