li标签实现下拉选择框

博主在项目需求中遇到过，需要下拉框这样那样的，但是框架有没有该功能，你说修改框架源码吧，总觉得不是很好，劝产品修改需求吧，更不可能。所以只能自己写一个下拉选择框来满足BT的需求。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义下拉框</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            font-family: "Microsoft YaHei";
        }
        .selectBox{
            width: 400px;
            margin: 50px auto;
        }
        .viewBox{
            width: 400px;
            height: 40px;
            color: #303030;
            cursor: pointer;
            line-height: 40px;
            border: 1px solid #dcdcdc;
        }
        .viewInput{
            width: 345px;
            height:36px;
            outline: none;
            cursor: pointer;
            padding-left: 10px;
            font-size: 14px;
            border: none;
        }
        .optionBox{
            width: 400px;
            display: none;
            background: #f1f1f1;
        }
        .optionBox li{
            width: 390px;
            height: 40px;
            font-size: 14px;
            color: #c1c1c1;
            line-height: 40px;
            cursor: pointer;
            list-style-type: none;
            padding-left: 10px;
        }
        .optionBox li:hover{
            background: #919191;
            color: white;
        }
        .optionBox>li:first-child{
            margin-top: 10px;
        }
        .btnImg{
            float: right;
            height: 40px;
            border-left: 1px solid #dcdcdc;
        }
    </style>
</head>
<body>
    <div class="selectBox">
        <div class="viewBox">
            <input type="text" class="viewInput" readonly="readonly">
            <div class="btnImg"><img src="arrow_input_down.png" alt=""></div>
        </div>
        <ul class="optionBox">
            <li>1111111111</li>
            <li>2222222222</li>
            <li>3333333333</li>
            <li>4444444444</li>
            <li>5555555555</li>
            <li>6666666666</li>
            <li>7777777777</li>
        </ul>
    </div>
    <script src="GZQ/JQ轮播/js/jquery-1.6.4.min.js"></script>
    <script>
        $(function () {
            var view = $(".optionBox li:first").text();
            $(".viewInput").val(view);
        });

        $(".viewBox").click(function () {
            if($(".optionBox").css("display")=="none"){
                $(".optionBox").show();
                $(".btnImg img").attr("src","arrow_input_up.png")
            }else{
                $(".optionBox").hide();
                $(".btnImg img").attr("src","arrow_input_down.png")
            }
        });

        var checkOption = $(".optionBox li");
        checkOption.click(function () {
            var index = $(".optionBox li").index(this);
            var indexVal = $(".optionBox li:eq("+index+")").html();
            $(".viewInput").val(indexVal);
            if($(".optionBox").css("display")=="none"){
                $(".optionBox").show();
                $(".btnImg img").attr("src","arrow_input_up.png")
            }else{
                $(".optionBox").hide();
                $(".btnImg img").attr("src","arrow_input_down.png")
            }
        })
    </script>
</body>
</html>

效果图：

PS：代码需自行引入jq，下拉框右侧图表亦需自行添加。

这篇博文只介绍了如何实现下拉选择框以及获取option值，请悉知。

li标签实现下拉选择框

猜你喜欢