select更改默认样式
程序员文章站
2022-06-07 13:41:08
...
代码示例如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css" media="screen">
*{
margin:0;
padding:0;
}
.selectBox{width:242px;height:56px;margin-right:36px;border-radius:4px;display: inline-block;border:1px solid #e8ebef;}
.selectOption{width:200px;position:absolute;display: none;}
.selectKuang{width:242px;height:56px;overflow: hidden;position: relative;z-index:10;}
.selectKuang::before{content: "";position: absolute;top: 25px;right: 20px;z-index:10;width: 0;height: 0;border: 8px solid transparent;border-top: 8px solid #28333f;}
.selectKuang ul{width:100%;padding-top:56px;border-radius: 4px;border-left:1px solid #e6eaee;border-bottom:1px solid #e6eaee;overflow:hidden;}
.selectKuang ul li{height: 56px;text-align:center;line-height: 56px;background:#fff;border-right:1px solid #e6eaee;}
.selectKuang ul li:hover{background:#0ea1d4;color:#fff;border-radius: 4px;}
.selectSpan{position: absolute;top:0;left:0;width:218px;height:56px;line-height: 56px;background:#fff;padding-left:24px;}
.selectSpan::after{content:""; position: absolute;right:0px;width:56px;height:56px;border-left:1px solid #e8ebef;}
</style>
</head>
<body>
<div class="selectBox yzg_fl">
<select id="selectOption" class="selectOption">
<option value="请选择">请选择</option>
<option value="选项1">1选项1</option>
<option value="选项2" selected>2选项2</option>
<option value="选项3">3选项3</option>
</select>
<div id="selectKuang" class="selectKuang">
<div id="selectSpan" class="selectSpan">请选择</div>
<ul>
<li>请选择</li>
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
</ul>
</div>
</div>
<script>
var selectOption = document.querySelectorAll("#selectOption");
var selectKuang = document.querySelectorAll("#selectKuang");
var selectSpan = document.querySelectorAll("#selectSpan");
for (var i = 0; i < selectSpan.length; i++) {
selectSpan[i].index = i;
selectSpan[i].onclick = function(e) {
e.stopPropagation();
// for (var j = 0; j < selectKuang.length; j++) {
// if(this.index != j){
// selectKuang[i].style.overflow = "hidden"; //下拉菜单隐藏
// }
// }
// if (selectKuang[this.index].style.overflow == "visible") //判断是否显示
// {
// selectKuang[this.index].style.overflow = "hidden"; //下拉菜单隐藏
// } else {
selectKuang[this.index].style.overflow = "visible"; //下拉菜单展开
// }
var selectKuangList = selectKuang[this.index].children[1].children;
var spanSelf = this.index;
for (var i = 0; i < selectKuangList.length; i++) {
selectKuangList[i].index = i;
selectKuangList[i].onclick = function() //选项子类
{
selectKuang[spanSelf].style.overflow = "hidden";
// alert(this.index);
var selectValue = selectOption[spanSelf].options[this.index].value; //下拉菜单选中哪个选项
// console.log("选项: " + selectValue);
for (var i = 0; i < selectKuangList.length; i++) {
selectOption[spanSelf].options[i].removeAttribute("selected"); //移除未选中的选项
}
selectOption[spanSelf].options[this.index].setAttribute("selected", true); //选中选项
selectSpan[spanSelf].innerHTML = selectKuangList[this.index].innerHTML; //下拉子类赋值给文本框
// console.log(selectSpan[spanSelf].innerHTML);
}
}
}
}
for (var i = 0; i < selectOption.length; i++) {
selectOption[i].index = i;
selectOption[i].onchange = function() //下拉选项触发改变
{
var selectValue = selectOption[this.index].options[selectOption[this.index].selectedIndex].value;
selectSpan[this.index].innerHTML = selectValue;
console.log(selectValue);
}
}
</script>
</body>
</html>