HTML-模拟select下拉框

逃离我推掉我的手 2022-04-22 09:02 388阅读 0赞

html

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>模拟select下拉框</title>
    		<link rel="stylesheet" href="select.css"/>
    	</head>
    	<body>
    	    <div class="model-box" style="width:180px; z-index:22;">
    	        <div id="box" class="model-select-text" data-value="">--请选择--</div>
    	        <ul class="model-select-option">
    	            <li data-option="1">选项一</li>
    	            <li data-option="2">选项二</li>
    	        </ul>
    	        <br>
    	        <button id="btn">获取值</button>
    	        <br/>
    	        <span id="showSelectVal"></span>
    	    </div>
    	</body>
    	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
        <script src="select.js"></script>
    </html>

css

.model-box {
        position: relative;
        width: 200px;
        height: 30px;
        line-height: 30px;
        background-color: #fff;
        border: 1px solid #e4e4e4;
        border-radius: 3px;
        text-indent: 5px;
    }
    
    .model-box .model-select-text {
        position: relative;
        width: 100%;
        height: 28px;
        // height: 30px;
        // line-height: 30px;
        color: #666;
        text-indent: 10px;
        font-size: 14px;
        cursor: pointer;
        user-select: none;
    }
    
    .model-box .model-select-text:after {
        position: absolute;
        top: 10px;
        right: 10px;
        content: '';
        width: 0;
        height: 0;
        border-width: 10px 8px 0;
        border-style: solid;
        border-color: #666 transparent transparent;
    }
    
    .model-box .model-select-option {
        position: absolute;
        top: 30px;
        left: -1px;
        display: none;
        list-style: none;
        border: 1px solid #e4e4e4;
        border-top: none;
        padding: 0;
        margin: 0;
        width: 100%;
        z-index: 99;
        background-color: #fff;
    }
    
    .model-box .model-select-option li {
        height: 28px;
        line-height: 28px;
        color: #333;
        font-size: 14px;
        margin: 0;
        padding: 0;
        // text-indent: 10px;
        cursor: pointer;
    }
    
    .model-box .model-select-option li:hover {
        background-color: #f3f3f3;
    }
    
    .model-box .model-select-option li.seleced {
        background-color: #f3f3f3;
    }

$(function() {
        selectModel();
        $("#btn").click(function() {
    		$("#showSelectVal").html($("#box").attr("data-value"));
        });
    });
    
    /**
     * 模拟网页中所有下拉列表select
     * @return {[type]} [description]
     */
    function selectModel() {
        var $box = $('div.model-box');
        var $option = $('ul.model-select-option', $box);
        var $txt = $('div.model-select-text', $box);
        var speed = 10;
        /**
         * 单击某个下拉列表时，显示当前下拉列表的下拉列表框
         * 并隐藏页面中其他下拉列表
         */
        $txt.on('click', function() {
            var $self = $(this);
            $option.not($self).siblings('ul.model-select-option').slideUp(speed, function() {
                init($self);
            });
            $self.siblings('ul.model-select-option').slideToggle(speed, function() {
                init($self);
            });
            return false;
        });
    
        // 点击选择，关闭其他下拉
        /**
         * 为每个下拉列表框中的选项设置默认选中标识 data-selected
         * 点击下拉列表框中的选项时，将选项的 data-option 属性的属性值赋给下拉列表的 data-value 属性，并改变默认选中标识 data-selected
         * 为选项添加 mouseover 事件
         */
        $option.find('li').each(function(index, element) {
            var $self = $(this);
            if ($self.hasClass('selected')) {
                $self.addClass('data-selected');
            }
        }).mousedown(function() {
            $(this).parent().siblings('div.model-select-text').text($(this).text()).attr('data-value', $(this).attr('data-option'));
    
            $option.slideUp(speed, function() {
                init($(this));
            });
            $(this).addClass('selected data-selected').siblings('li').removeClass('selected data-selected');
            return false;
        }).mouseover(function() {
            $(this).addClass('selected').siblings('li').removeClass('selected');
        });
    
        // 点击文档隐藏所有下拉
        $(document).on('click', function() {
            var $self = $(this);
            $option.slideUp(speed, function() {
                init($self);
            })
        });
    
        /**
         * 初始化默认选择
         */
        function init(obj) {
            obj.find('li.data-selected').addClass('selected').siblings('li').removeClass('selected');
        }
    }

效果  
![在这里插入图片描述][20181103212100622.jpg]  
参考

> [https://segmentfault.com/a/1190000010075550][https_segmentfault.com_a_1190000010075550]

[20181103212100622.jpg]: /images/20220422/507421bc0fe8482e94f95b7c592c43ec.png
[https_segmentfault.com_a_1190000010075550]: https://segmentfault.com/a/1190000010075550