jquery商品三级分类选择发布效果代码-html代码-BFW代码库

代码语言：html

代码描述：jquery商品三级分类选择发布效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="renderer" content="webkit" />
    <style>
@charset "utf-8";
        /**Style Reset；www.jqueryfuns.com**/
        body, div, span, h1, h2, h3, h4, h5, h6, p, pre, sup, sub, ul, ol, li, dl, dt, dd, form, fieldset, input, button, textarea, select, iframe, img, a, header, footer, section, article, aside, details, figcaption, figure, hgroup, nav, menu, canvas {
            padding: 0;
            margin: 0;
        }
        body {
            background-color: #fff;
            color: #000;
            font: 12px/20px "Microsoft Yahei", Tahoma, Arial, "Helvetica Neue", "Hiragino Sans GB", Simsun, sans-self;
        }
        ul, ol {
            list-style-type: none;
        }
        b, strong {
            font-weight: normal;
        }
        i, em {
            font-style: normal;
        }
        a {
            text-decoration: none;
            color: #333;
        }
        /*清除浮动*/
        .clearfix:after {
            clear: both;
            display: block;
            height: 0;
            content: "";
        }
        /*主体部分*/
        .contains {
            width: 1000px;
            margin: 0 auto;
        }
        /*面包屑导航*/
        .crumbNav {
            padding: 18px 0;
            color: #323232;
        }
        .crumbNav a {
            color: #ed7f5a;
        }
        .crumbNav a:hover {
            color: #d95459;
        }
        .crumbNav font {
            padding: 0 2px;
            font-family: simsun;
        }
        /**选择商品分类**/
        .wareSort {
            padding: 15px 8px 15px 7px;
            border: 1px solid #ddd;
            background-color: #f6f6f6;
        }
        .wareSort ul {
            float: left;
            width: 290px;
            padding: 10px;
            border: 1px solid #ddd;
            margin-right: 7px;
            margin-left: 8px;
            background-color: #fff;
        }
        .wareSort ul li a {
            display: block;
            padding-right: 25px;
            padding-left: 10px;
            border: 1px solid #fff;
            line-height: 28px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .wareSort ul li a:hover {
            color: #52bea6;
        }
        .wareSort ul li.active a {
            border-color: #52bea6;
            background: #cefff4 url(//repo.bfw.wiki/bfwrepo/image/5f7ab7cfd3599.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_10,h_10,/quality,q_90) no-repeat right center;
            color: #52bea6;
        }
        .selectedSort {
            padding: 10px 15px;
            border: 1px solid #ed7f5a;
            margin-top: 10px;
            margin-bottom: 10px;
            background-color: #fff4f0;
            color: #ed7f5a;
        }
        .selectedSort b {
            font-weight: bold;
        }
        .selectedSort i font {
            font-family: simsun;
        }
        .wareSortBtn {
            padding-bottom: 50px;
            text-align: center;
        }
        .wareSortBtn input {
            width: 200px;
            height: 36px;
            border: 1px solid #ed7f5a;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            background-color: #ed7f5a;
            color: #fff;
        }
        .wareSortBtn input:hover {
            border-color: #d95459;
            background-color: #d95459;
        }
        .wareSortBtn input:disabled {
        </style>
        <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    </head>

    <body>

        <div class="contains">
            <!--面包屑导航-->
            <div class="crumbNav">
                <a href="demo.html">首页</a>
                <font>&gt;</font>
                发布商品
                <font>&gt;</font>
                选择商品所在分类
            </div>
            <!--商品分类-->
            <div class="wareSort clearfix">
                <ul id="sort1"></ul>
                <ul id="sort2" style="display: none;"></ul>
                <ul id="sort3" style="display: none;"></ul>
            </div>
            <div class="selectedSort">
                <b>您当前选择的商品类别是：</b><i id="selectedSort"></i>
            </div>
            <div class="wareSortBtn">
                <input id="releaseBtn" type="button" value="下一步" disabled="disabled" />
            </div>
            <script>

                var province = ["教育",
                    "文艺",
                    "青春",
                    "生活",
                    "人文社科",
                    "经管",
                    "科技",
                    "电子书"];
                //二级分类
                var city = [
                    ["教材",
                        "外语",
                        "考试"],
                    ["文学",
                        "传记",
                        "艺术",
                        "摄影"],
                    ["青春文学",
                        "动漫",
                        "幽默"],
                    ["休闲/爱好",
                        "孕产/胎教",
                        "烹饪/美食",
                        "时尚/美妆",
                        "旅游/地图",
                        "家庭/家居",
                        "亲子/家教",
                        "两性关系",
                        "育儿/早教",
                        "保健/养生"],
                    ["历史",
                        "文化",
                        "古籍",
                        "心理学",
                        "哲学/宗教"],
                    ["管理",
                        "投资理财",
                        "经济"],
                    ["科普读物",
                        "建筑",
                        "医学",
                        "计算机/网络",
                        "农业/林业",
                        "自然科学",
                        "工业技术"],
                    ["新华出品",
                        "文艺",
                        "网络文学",
                        "人文社科",
                        "经管励志",
                        "生活",
                        "童书",
                        "科技",
                        "教育",
                        "期刊杂志"]
                ];
                //三级分类
                var district = [
                    /*教育*/
                    [
                        ["研究生/本科",
                            "高职高专",
                            "中职中专"],
                        ["英语综合教程",
                            "英语专项训练",
                            "英语读物"],
        .........完整代码请登录后点击上方下载按钮下载查看