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 = [
                    /*教育*/
                    [
                        ["研究生/本科",
                            "高职高专",
                            "中职中专"],
                        ["英语综合教程",
                            "英语专项训练",
                            "英语读物"],
                        ["学历考试",
                            "公职",
                            "财税外贸保险",
                            "建筑工程",
                            "计算机",
                            "医药卫生",
                            "艺术/体育",
                            "考研",
                            "公务员"]
                    ],
                    /*文艺*/
                    [
                        ["文集",
                            "纪实文学",
                            "文学理论"],
                        ["财经人物",
                            "历代帝王",
                            "领袖首脑",
                            "军事人物",
                            "政治人物",
                            "历史人物",
                            "女性人物",
                            "法律人物",
                            "宗教人物",
                            "哲学家"],
                        ["艺术理论",
                            "世界各国艺术",
                            "绘画"],
                        ["摄影理论",
                            "摄影入门"]
                    ],
                    /*青春*/
                    [
                        ["校园",
                            "爱情/情感",
                            "叛逆/成长"],
                        ["大陆漫画",
                            "港台漫画",
                            "日韩漫画",
                            "欧美漫画",
                            "其他国外漫画",
                            "世界经典漫画",
                            "动漫同人作品",
                            "动漫学堂",
                            "画集"],
                        ["幽默/笑话集",
                            "轻小说",
                            "游戏同人作品",
                            ""]
                    ],
                    /*生活*/
                    [
                        ["游戏",
                            "宠物杂事",
                            "车载户外"],
                        ["孕前准备",
                            "胎教",
                            "孕期",
                            "孕产妇健康",
                            "孕期饮食指导",
                            "产后管理"],
                        ["家常菜谱",
                            "烘焙甜点",
                            "药膳食疗",
                            "西餐料理",
                            "茶酒饮料"],
                        ["瑜伽",
                            "时尚",
                            "奢侈品",
                            "瘦身美体"],
                        ["国内自助游",
                            "国外自助游",
                            "城市自助游",
                            "户外探险",
                            "旅游随笔",
                            "旅游攻略"],
                        ["家庭园艺",
                            "家装效果实例",
                            "家装方法指导",
                            "家装策略秘籍",
                            "家事窍门"],
                        ["家教理论",
                            "家教方法",
                            "成功案例"],
                        ["两性关系",
                            "恋爱",
                            "婚姻",
                            "性"],
                        ["育儿百科",
          .........完整代码请登录后点击上方下载按钮下载查看