HTML-模拟select下拉框

最新推荐文章于 2025-06-19 03:39:14 发布

原创最新推荐文章于 2025-06-19 03:39:14 发布 · 2.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #模拟select

算法专栏收录该内容

4 篇文章

订阅专栏

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');
    }
}

效果
在这里插入图片描述
参考