js如何实现select下拉框选择

前端  /  管理员 发布于 7年前   220

首先来看一下效果图：

7daf85502d6f2a87d7236de4fa305de.png

（推荐教程：js教程）

具体代码如下：

<html><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>

更多炫酷CSS3、html5、javascript特效代码，尽在：js特效大全

以上就是js如何实现select下拉框选择的详细内容，更多请关注其它相关文章！


  • 上一条：
    详解css行内样式、内嵌样式与外部引用样式的使用方法
    下一条：
    详解js中函数的相关定义与用法

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客