demo-div模拟select下拉框

用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>