mobileSelect实现手机弹出多级选择框效果代码-html代码-BFW代码库

代码语言：html

所属分类：选择器

代码描述：mobileSelect实现手机弹出多级选择框效果代码

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>mobile插件单选与多选的混合</title>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/mobileSelect.css">
    <style type="text/css">
        body {
            font-size: 38px;
        }
        .mobileSelect .content {
            display: flex;
            flex-direction: column;
        }
        .content .panel {
            order: 1;
        }
        .content .btnBar {
            order: 2;
        }
        .choose {
            width: 100%;
            order: 0;
            display: flex;
            position: fixed;
            bottom: 198px;
            z-index: 100000;
            left: 0;
        }
        .table {
            width: 100%;

            overflow-x: scroll;
        }
        .selectContainer li {

            color: #666666;
            font-family: "SourceHanSansCN";
        }
        .selectContainer .big {

            color: #000000;
            font-family: "SourceHanSansCN";
        }
        .cartype,.carnum,.money {
            height: 65px;
            font-family: "SourceHanSansCN";
            font-size: 14px;
            flex: 1;
            text-align: center;
            cursor: pointer;
        }
        .yl {
            color: #333333;
            font-weight: 600;
            background-color: #FFFFFF;
        }
        .bgc {
            color: #666666;
            background-color: #F2F2F2;
        }
        li {
            list-style: none;
        }
        .carssd,.salary {
            display: none;
        }
        .dbtc {
            display: none;
        }
        .tc_tit {
            font-size: 12px;
            color: #666666;
            font-weight: 400;
            margin: 13px 0 8px 0;
        }
        .tc_cs {
            font-size: 14px;
            color: #333333;
            letter-spacing: 1px;
            font-weight: 400;
        }
        .cor {
            color: #4286FF;

        }
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mobileSelect.js"></script>
</head>
<body>
    <h3>mobileselect的应用</h3>
    <div class="mobileselect">
        点击选择查看效果
    </div>
    <div class="dbtc">
        <div class="choose">
            <div class="cartype yl">
                <div class="tc_tit">
                    车型
                </div>
                <div class="tc_cs">
                    请选择
                </div>
            </div>
            <div class="carnum bgc">
                <div class="tc_tit">
                    车号
                </div>
                <div class="tc_cs">
                    请选择
                </div>
            </div>
            <div class="money bgc">
                <div class="tc_tit">
                    价格
                </div>
                <div class="tc_cs">
                    请选择
                </div>
            </div>
        </div>
        <div class="table">
            <div class="carapp">
            </div>
            <div class="carssd">
            </div>
            <div class="salary">
            </div>
        </div>
    </div>

    <script type="text/javascript">
        var cartype = ['小轿车', '轿车', 'qq车', '客车', '货车', '公交车', '跑车', '摩托车'];
        //console.log(workexp);
        //['在校生','实习生','1年内','2年内','3年内','4年内','5年内','8年内'];
        var minedu = ['11111', '66666', '88888', '22222', '55555', '99999', '77777'];
        //['不限','高中','中专','大专','本科','硕士','博士'];
        var pay1 = [{
            'id': 0,
            'value': '免费'
        }, {
            'id': 1000,
            'value': '1k'
        }, {
            'id': 2000,
            'value': '2k'
        }, {
            'id': 3000,
            'value': '3k'
        }, {
            'id': 4000,
            'value': '4k'
        }, {
            'id': 5000,
            'value': '5k'
        }, {
            'id': 6000,
            'value': '6k'
        }, {
            'id': 7000,
            'value': '7k'
        }, {
            'id': 8000,
            'value': '8k'
        }, {
            'id': 9000,
            'value': '9k'
        }, {
            'id': 10000,
            'value': '10k'
        }, {
            'id': 11000,
            'value': '11k'
        }, {
            'id': 12000,
            'value': '12k'
        }, {
            'id': 13000,
            'value': '13k'
        }, {
            'id': 14000,
            'value': '14k'
        }, {
            'id': 15000,
            'value': '15k'
        }, {
            'id': 16000,
            'value': '16k'
        }, {
            'id': 17000,
            'value': '17k'
        }, {
            'id': 18000,
            'value': '18k'
        }, {
            'id': 19000,
            'value': '19k'
        }];
        //['面谈','1K','2K','3K','4K','5K','6K','7K','8K','9K','10K','11K','12K','13K','14K','15K','16K','17K','18K','19K'];
        var pay2 = [{
            'id': 0,
            'value': '免费'
        }, {
            'id': 1000,
            'value': '1k'
        }, {
            'id': 2000,
            'value': '2k'
        }, {
            'id': 3000,
            'value': '3k'
        }, {
            'id': 4000,
            'value': '4k'
        }, {
            'id': 5000,
            'value': '5k'
        }, {
            'id': 6000,
            'value': '6k'
        }.........完整代码请登录后点击上方下载按钮下载查看