文单阅读

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS自定义黑色单选框和复选框</title>

    <link rel="stylesheet" href="style.css">

    <style type="text/css">
        body {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 14px;
            line-height: 1.42857143;
            color: #666;
            margin: 0;
            background-color: #F0F0F0;
        }
        .m{
            width: 800px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 100px;
        }
        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
    </style>
</head>
<body>

<div class="m">
    <div class=" selectPickerWrapper showYear" data-checks="1,2,3" data-model="Year" >
        <select class="hidden"></select>

    </div>
    <div class="selectPickerWrapper showCity" data-model="City">
        <select class="hidden">
            <option value="1">万源路</option>
            <option value="2">漕宝路666号</option>
            <option value="3">古美街道</option>
            <option value="4">平南路888号</option>
            <option value="5">合川路</option>
            <option value="6">莲花路4545号</option>
        </select>
    </div>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="select2.js"></script>
<script type="text/javascript">
    $(function() {
        var map = [{"text":"2020","val":"1"},{"text":"2019","val":"2"},{"text":"2018","val":"3"},{"text":"2017","val":"4"}];
        $(".showYear").data("init",JSON.stringify(map));
        $(".showYear").mySelect({
            showCancel:true,
            showSearch:true,
            multiple:true
        });

        $(".showCity").mySelect({
            showCancel:false,
            showSearch:true,
            multiple:false
        });

        console.log(JSON.stringify(map));
    });
</script>

</body>
</html>
15323441764微电