js实现select下拉框选择
程序员文章站
2022-07-02 19:34:46
最近在做一个项目需要兼容到ie不同版本，在使用select时遇到了各种问题。后来索性就自己使用原生js实现了这样一个下拉框，话不多说，直接上代码吧。
最近在做一个项目需要兼容到ie不同版本，在使用select时遇到了各种问题。后来索性就自己使用原生js实现了这样一个下拉框，话不多说，直接上代码吧。
<html lang="en">
<head>
<meta charset="utf-8">
<title>自定义select</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
#main{
position: relative;
width: 280px;
height: 42px;
}
#content{
width: 280px;
height: 42px;
line-height: 42px;
padding-left: 10px;
background: rgb(255, 255, 255);
border-radius: 2px;
border: 1px solid rgb(221, 221, 221);
font-size: 16px;
font-family: microsoftyahei;
color: rgb(51, 51, 51);
cursor: pointer;
}
#selectimg{
position: absolute;
top:13px;
right: 10px;
cursor: pointer;
}
#selectitem{
display: none;
border: 1px solid #eee;
width: 290px;
}
#selectitem ul{
list-style: none;
}
#selectitem ul li{
height: 30px;
line-height: 30px;
padding-left: 10px;
cursor: pointer;
}
#selectitem ul li:hover{
background-color:#f5f7fa;
}
</style>
<body>
<div id="main">
<div id="content">
</div>
<img id="selectimg" src="./icon_select.png" alt="">
<div id="selectitem">
<!-- <ul>
<li data-value="1">北京</li>
<li data-value="2">上海</li>
<li data-value="3">深圳</li>
</ul>-->
</div>
</div>
</body>
<script>
var data = [{name:'北京',value:'1'},{name:'上海',value:'2'},{name:'广州',value:'3'}]
var content = document.getelementbyid('content');
var selectimg = document.getelementbyid('selectimg');
var selectitem = document.getelementbyid('selectitem');
var ul = document.createelement('ul');
selectitem.appendchild(ul);
for(var i = 0; i < data.length; i++){
var li = document.createelement('li');
li.setattribute('data-value',data[i].value);
li.innertext = data[i].name;
ul.appendchild(li);
}
/**
* 点击下拉箭头
*/
selectimg.onclick = function () {
console.log(selectitem.style.display);
if(selectitem.style.display == 'none' || selectitem.style.display == ''){
selectitem.style.display = 'block';
}else{
selectitem.style.display = 'none';
}
}
content.onclick = function () {
if(selectitem.style.display == 'none' || selectitem.style.display == ''){
selectitem.style.display = 'block';
}else{
selectitem.style.display = 'none';
}
}
var lis = selectitem.getelementsbytagname('li');
for(var i = 0; i < lis.length; i++){
lis[i].onclick = function () {
console.log(this.innerhtml,this.getattribute('data-value'));
content.innertext = this.innerhtml;
selectitem.style.display = 'none';
}
}
</script>
</html>
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： js实现二级联动简单实例