Home > Web Front-end > JS Tutorial > How to implement select drop-down box selection in js

How to implement select drop-down box selection in js

王林
Release: 2020-03-30 11:27:30
forward
3590 people have browsed it

How to implement select drop-down box selection in js

First, let’s take a look at the renderings:

How to implement select drop-down box selection in js

(Recommended tutorial: js tutorial)

The specific code is as follows:

<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:&#39;北京&#39;,value:&#39;1&#39;},{name:&#39;上海&#39;,value:&#39;2&#39;},{name:&#39;广州&#39;,value:&#39;3&#39;}]
  var content = document.getElementById(&#39;content&#39;);
  var selectImg = document.getElementById(&#39;selectImg&#39;);
  var selectItem = document.getElementById(&#39;selectItem&#39;);

  var ul = document.createElement(&#39;ul&#39;);
  selectItem.appendChild(ul);
  for(var i = 0; i < data.length; i++){
    var li = document.createElement(&#39;li&#39;);
    li.setAttribute(&#39;data-value&#39;,data[i].value);
    li.innerText = data[i].name;
    ul.appendChild(li);
  }
  /**
   * 点击下拉箭头
   */
  selectImg.onclick = function () {
    console.log(selectItem.style.display);
    if(selectItem.style.display == &#39;none&#39; || selectItem.style.display == &#39;&#39;){
      selectItem.style.display = &#39;block&#39;;
    }else{
      selectItem.style.display = &#39;none&#39;;
    }

  }

  content.onclick = function () {
    if(selectItem.style.display == &#39;none&#39; || selectItem.style.display == &#39;&#39;){
      selectItem.style.display = &#39;block&#39;;
    }else{
      selectItem.style.display = &#39;none&#39;;
    }
  }

  var lis = selectItem.getElementsByTagName(&#39;li&#39;);
  for(var i = 0; i < lis.length; i++){
    lis[i].onclick = function () {
      console.log(this.innerHTML,this.getAttribute(&#39;data-value&#39;));
      content.innerText = this.innerHTML;
      selectItem.style.display = &#39;none&#39;;
    }
  }
</script>
</html>
Copy after login

More cool CSS3, html5, javascript special effects codes are all in: js special effects collection

The above is the detailed content of How to implement select drop-down box selection in js. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:jb51.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template