模拟select框

今儿公司嫌弃select太丑，还要兼用ie，还不想它太花哨，就简单写了一个，

觉得jquery写的比较白痴，

前端小菜鸟，可以吐槽，

欢迎提供更好的建议，么么哒~

<div class="search_z fl">
	<label class="fl">状态：</label>
	<div class="ser_sel fl">
		<input type="text" name="" value="" onfocus=this.blur()>
		<img src="images/sel.png">
		<ul class="mn_sel">
			<li>已发送</li>
			<li>未发送</li>
		</ul>
	</div>
</div>

.fl {
    float: left;
}
.search_z {
    line-height: 43px;
}
.ser_sel {
    border: 1px solid #bbbbbb;
    width: 85px;
    height: 25px;
    margin-top: 9px;
    line-height: 25px;
    position: relative;
}
.ser_sel>img {
    position: absolute;
    right: 0;
    z-index: 10;
    top: 0;
    border-left: 1px solid #bbb;
    padding: 10px 5px;
    background-color: #ebebeb;
    cursor: pointer;
}
.mn_sel {
    display: none;
    position: absolute;
    width: 100%;
    background: #fff;
    border: 1px solid #ccc;
    left: -1px;
    top: 25px;
}
.mn_sel>li {
    line-height: 28px;
    height: 28px;
    border-bottom: 1px solid #ccc;
    padding-left: 5px;
    cursor: pointer;
}

//模拟select
$(".ser_sel").find("img").on('click',function(){
	$(this).next().show();
});
$(".ser_sel").find("input").on('click',function(){
	$(this).next().next().show();
});
$(".mn_sel").on('click','li',function(){
	$(this).parent().parent().find("input").val($(this).html());
	$(this).parent().hide();
});

 

转载于:https://my.oschina.net/u/3420977/blog/877097