jQuery select下拉框美化
程序员文章站
2023-12-27 15:47:39
...
jQuery select下拉框美化
HTML：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery select下拉框美化</title>
<meta charset="utf-8">
<script src="../../js/jquery-1.12.1.js"></script>
</head>
<body>
<div style="width: 264px; height: 130px; left: 0px; top: 0px; position: absolute; right: 0px; bottom: 0px; margin: auto;">
<select name="drop1" class="ui-select2" id="selectId">
<option value="">structure empty</option>
<option value="1">structure 1</option>
<option value="2">structure 2</option>
<option value="3">structure 3</option>
<option selected value="4">structure 4</option>
<option value="5">structure 5</option>
<option value="6">structure 6</option>
<option value="7">structure 7</option>
<option value="8">structure 8</option>
<option value="9">structure 9</option>
<option value="10">structure 10</option>
<option value="11">structure 11</option>
</select>
</div>
</body>
</html>CSS：
<style type="text/css">
* {
margin: 0;
list-style: none;
padding: 0;
}
.slt-main{
background-color: #FFFFFF;
border: 1px solid #4682B4;
box-shadow: 0 0 2px #4682B4;
border-radius: 5px;
font-size: 17px;
height: 30px;
position: relative;
width: 200px;
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;
}
.slt-arrow{
border-top: 7px solid #4682B4;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
cursor: pointer;
height: 0px;
position: absolute;
top: 12px;
right: 10px;
width: 0px;
z-index: 7;
}
.slt-arrow.reverse {
border-top: 7px solid transparent;
border-bottom: 7px solid #4682B4;
top: 4px;
}
.slt-set{
background-color: #FFFFFF;
border-radius: 5px;
color: #4682B4;
cursor: pointer;
height: 30px;
line-height: 30px;
overflow: hidden;
position: relative;
padding: 0 35px 0 15px;
width: 150px;
z-index: 5;
}
.slt-block{
background-color: #FFFFFF;
border-left: 1px solid #4682B4;
border-right: 1px solid #4682B4;
border-bottom: 1px solid #4682B4;
border-radius: 5px;
box-shadow: 0 0 2px #4682B4;
left: -1px;
line-height: 20px;
position: absolute;
top: 32px;
width: 200px;
}
.slt-list{
cursor: pointer;
margin: 15px 0 7px;
list-style-type: none;
}
.slt-item{
color: #4682B4;
padding: 6px 15px;
}
li.slt-item.active{
background-color: rgb(45, 178, 255);
color: #FFFFFF;
}
.slt-item:hover{
background-color: rgb(45, 178, 255);
color: #FFFFFF;
}
ul.slt-list::-webkit-scrollbar {
width: 12px;
}
ul.slt-list::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.5);
}
</style>JQuery:
<script type="text/javascript">
var num = 0;
function creatSelect(strId,relatedFunc) {
var objSlt = $("#" + strId);
objSlt.css("display", "");
var strSltDefault = '<div id="creatSlt' + num + '" class="slt-main" style="' +objSlt.attr("style") + '"><div class="slt-arrow"></div><div class="slt-set"></div><div class="slt-block" style="display: none;"><ul class="slt-list" style="height: 200px; overflow: auto;"></ul></div><div>'
objSlt.css("display", "none");
objSlt.after(strSltDefault);
var objSltOptList = objSlt.find("option");
var objCreat = $("#creatSlt" + num);
var strLi = "";
for(let i = 0; i < objSltOptList.length; i++) {
var objLi = $(objSltOptList[i]);
if(objLi.prop("selected") || objLi.attr("selected")) {
strLi += '<li class="slt-item active" value="' + objLi.attr("value") + '">' + objLi.text() + '</li>'
objSlt.next("div").find(".slt-set").text(objLi.text());
} else {
strLi += '<li class="slt-item" value="' + objLi.attr("value") + '">' + objLi.text() + '</li>'
}
}
objSlt.next("div").find(".slt-list").append(strLi);
$("#creatSlt" + num).bind("click", function() {
$(".slt-block").css("display", "none");
$(".slt-arrow").removeClass("reverse");
if($(this).find(".slt-block").css("display") == "none") {
$(this).find(".slt-block").css("display", "block")
$(this).find(".slt-arrow").addClass("reverse");
} else {
$(this).find(".slt-block").css("display", "none")
$(this).find(".slt-arrow").removeClass("reverse");
}
});
objCreat.find(".slt-block").bind("click", function(e) {
var src;
if(e.target) {
src = $(e.target);
} else {
src = $(e.srcElement);
}
objCreat.find(".slt-set").text(src.text());
objCreat.find(".slt-list .active").removeClass("active");
src.addClass("active");
objSlt.get(0).selectedIndex = src.index();
if(relatedFunc){
eval(relatedFunc+"()");
}
});
num++;
}
$(document).bind("click",
function(e) {
if(!$(e.target).is(".slt-set") && !$(e.target).is(".slt-arrow") && !$(e.target).is(".slt-main")) {
$(".slt-block").css("display", "none")
$(".slt-arrow").removeClass("reverse");
}
}
);
creatSelect("selectId");
</script>推荐阅读
-
Element-UI下拉框select实现拼音搜索
-
Select2 - Ajax 获取下拉框分页数据（鼠标滚动分页）
-
Vue+Element UI中 Select下拉框搜索
-
jQuery select下拉框美化
-
jquery select选中的一个小问题_jquery
-
select 下拉框如何可以选择option里面的值，也可以用户自己输入啊？_html/css_WEB-ITnose
-
jsp jquery实现级联菜单,jquery对select元素的简单操作
-
Jquery编程开发中可多选的下拉框如何实现？
-
基于jquery扩展漂亮的下拉框可以二次修改
-
基于jquery的checkbox下拉框插件代码_jquery