效果图:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8d1aa44d854929203b55fcb53b12f45a.png)
HTML:
<div id="divSelect">
<a title="请选择一项身份"><div>请选择您的身份</div></a>
<ul style="display: none;">
<li><a href="javascript:;" selectid="高校老师/学生">高校老师/学生</a></li>
<li><a href="javascript:;" selectid="企业职员">企业职员</a></li>
<li><a href="javascript:;" selectid="个人用户">个人用户</a></li>
<li><a href="javascript:;" selectid="其他">其他</a></li>
</ul>
</div>
<input type="hidden" value="" id="identity" name="identity" required="" msg="请选择您的身份" must="required" placeholder="*身份" rule_name="身份" />
CSS:
#divSelect {
width: 100%;
cursor: pointer;
position: relative;
}
#divSelect div {
display: block;
margin-top: 15px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0 1.25rem;
width: 100%;
height: 3.125rem;
line-height: 3.125rem;
background-color: #ffffff;
border: solid 1px #dcdcdc;
border-radius: 0.313rem;
background: url(../../public/images/page_apply_xiangxia.png) no-repeat center;
background-size: auto 14px;
color: #757575;
background-position-x: calc(100% - 1.25rem);
letter-spacing: 1px;
margin-bottom: 0;
}
#divSelect div:hover{
border-color: #333;
}
#divSelect ul {
list-style-type: disc;
border-radius: 0.313rem;
margin: 0;
padding: 0;
border: 1px solid #dcdcdc;
background-color: #fff;
position: absolute;
width: 100%;
}
#divSelect ul li {
padding: 0 1.25rem;
height: 3.125rem;
line-height: 3.125rem;
text-align: -webkit-match-parent;
clear: both;
}
#divSelect ul:hover {
border-color: #333;
}
#divSelect ul li:hover {
border-radius: 0.313rem;
background-color: #E6213A;
color: #fff;
}
#divSelect ul li a {
display: block;
height: 100%;
color: #333333;
text-decoration: none;
}
#divSelect ul li a:hover {
color: #fff;
}
JS:
$(function () {
$.divSelect("#divSelect", "#identity");
});
jQuery.divSelect = function (divSelectid, identityid) {
var identity = $(identityid);
$(divSelectid + " div").click(function () {
var ul = $(divSelectid + " ul");
if (ul.css("display") == "none") {
ul.slideDown("fast");
} else {
ul.slideUp("fast");
} this.style.cssText = 'color: #000';
});
$(divSelectid + " ul li a").click(function () {
var txt = $(this).text();
$(divSelectid + " div").html(txt);
var value = $(this).attr("selectid");
identity.val(value);
$(divSelectid + " ul").hide();
});
};