demo-div模拟select下拉框

最新推荐文章于 2021-03-04 10:56:15 发布

转载最新推荐文章于 2021-03-04 10:56:15 发布 · 159 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/fyj-web-18/p/9503975.html

文章标签：

#javascript #ViewUI

本文介绍如何仅使用HTML、CSS和JavaScript来模拟一个简单的下拉框选择器。该选择器包括一个显示当前选项的文本框及一个包含多个选项的下拉列表。通过点击文本框可以展开或收起下拉列表，并且选中项会更新到文本框中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用div模拟下拉框，粘贴复制代码直接使用，小图标需替换自己的

html部分：

<div class="mod_select">
<div class="box-select box-select-bg2" style="border: none;">
<span class="select_txt">全部</span>
<ul class="option">
<li data-key="3">全部</li>
<li data-key="1">离线</li>
<li data-key="2">告警</li>
<li data-key="0">在线</li>
</ul>
</div>
</div>
<input type="hidden" data-key="" value="" id="select_value" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

css部分：

* {
padding: 0;
margin: 0;
}
.mod_select {
width: 334px;
height: 36px;
background-color: #ffffff;
border-radius: 2px;
border: solid 1px #dcdfe6;
margin: 100px auto;
}
.mod_select .box-select-bg2 {
background: url("../images/xia.png") 314px 15px no-repeat;
}
.mod_select .box-select-bg {
background: url("../images/shang.png") 314px 15px no-repeat;
}
.mod_select .box-select {
width: 100%;
height: 100%;
position: relative;
display: inline-block;
border-radius: 2px;
border: 1px solid #cccccc;
}
.mod_select .box-select .select_txt {
color: #555;
display: inline-block;
width: 100%;
line-height: 36px;
cursor: pointer;
border-radius: 2px;
box-sizing: border-box;
padding: 0 14px;
}
.mod_select .box-select .option {
width: 334px;
border: solid 1px #EDE7D6;
position: absolute;
z-index: 9999;
top: 36px;
left: -1px;
display: none;
}
.mod_select .box-select .option li {
color: #333;
display: block;
box-sizing: border-box;
height: 26px;
line-height: 26px;
text-align: left;
padding: 0 14px;
margin-left: 0;
width: 334px;
background: #fff;
border-style: none;
cursor: pointer;
}
.mod_select .box-select .option li:hover {
background-color: #EDE7D6;
}

js部分：

<script>
$(function () {
$(".box-select").click(function (event) {
event.stopPropagation();
$(this).find(".option").toggle();
$(this).parent().siblings().find(".option").hide();
$(this).toggleClass("box-select-bg");
});
$(document).click(function (event) {
var eo = $(event.target);
if ($(".box-select").is(":visible") && eo.attr("class") != "option" && !eo.parent(".option").length)
$('.option').hide();
});
$(".option li").click(function () {
var value = $(this).text();
var key = $(this).attr('data-key');
$(this).parent().siblings(".select_txt").text(value);
$("#select_value").val(value);
$("#select_value").attr('data-key', key)
});
$(".box-select").on("click", "li", function () {
var _value = $(this).attr("data-key");

// do something you want ...

})
})
</script>