Preface

Hello, FEer s!In our front-end development career, there are many details, some need to be compatible with lower version of ie browser, some need to have a better user experience.Recently, our company wants to design an official promotion website for product center, in which the Select drop-down box is because the interaction of designers can not be well achieved by native, as well as the effect, so I have simulated the implementation of Select, let's take a look.

Implementation Details

Technology involved

Considering compatibility and the lightest weight, we do not use native Javascript and Css to simulate select by referencing Jquery, etc.

Effect Display

Code Display

Html structure

<div class="select-box">
    <input type="text" class="select-input" value="" readonly placeholder="Regional Provinces" />
    <ul class="options-box hide">
      <li value="1">Beijing</li>
      <li value="2">Shanghai</li>
      <li value="3">Tianjin</li>
      <li value="4">Chongqing City</li>
      <li value="5">Hebei Province</li>
      <li value="6">Henan Province</li>
      <li value="6">Jiangsu Province</li>
      <li value="6">Yunnan Province</li>
    </ul>
  </div>

Css structure

/* Common Styles */
    *,
    body {
      padding: 0;
      margin: 0;
      list-style: none;
      font-size: 14px;
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
    }

    .hide {
      display: none;
    }

    /* Simulate drop-down box */
    .select-box {
      position: relative;
      margin: 50px 0 0 100px;
    }

    .select-box .select-input {
      line-height: 20px;
      border: 1px solid #d6d6d6;
      cursor: pointer;
      width: 170px;
      height: 50px;
      border: 1px solid transparent;
      outline: none;
      border-radius: 30px;
      -webkit-border-radius: 30px;
      -moz-border-radius: 30px;
      text-indent: 30px;
      font-size: 16px;
      font-weight: 400;
      /* color: rgba(187, 187, 187, 1); */
      color: rgba(34, 34, 34, 1);
      line-height: 22px;
      margin: 0;
      background: rgba(247, 247, 247, 1) url('./static/imgs/arrow-down.png') no-repeat scroll 130px center;
      background-size: 20px 20px;
      cursor: pointer;
      box-sizing: border-box;
    }

    /** input placeholder Color Change**/
    .select-box .select-input::-webkit-input-placeholder {
      /* WebKit browsers */
      color: rgba(187, 187, 187, 1);
    }

    .select-box .select-input:-moz-placeholder {
      /* Mozilla Firefox 4 to 18 */
      color: rgba(187, 187, 187, 1);
    }

    .select-box .select-input::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      color: rgba(187, 187, 187, 1);
    }

    .select-box .select-input:-ms-input-placeholder {
      /* Internet Explorer 10+ */
      color: rgba(187, 187, 187, 1);
    }

    .select-box .select-input.isActive {
      background-color: #ffffff;
      border: 1px solid rgba(204, 204, 204, 1);
      background-image: url(./static/imgs/arrow-up.png);
    }

    .select-box .options-box {
      position: absolute;
      top: 55px;
      left: 0;
      width: 170px;
      overflow-y: scroll;
      overflow-x: hidden;
      width: 170px;
      height: 225px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
      border-radius: 5px;
    }

    .select-box .options-box li {
      width: 170px;
      height: 45px;
      text-indent: 30px;
      cursor: pointer;
      font-size: 16px;
      font-weight: 400;
      color: rgba(34, 34, 34, 1);
      line-height: 45px;
      background: rgba(255, 255, 255, 1);
    }

    .select-box .options-box li.active {
      background-color: rgba(247, 247, 247, 1);
      color: rgba(2, 176, 159, 1)
    }

JavaScript structure

window.onload = function () {
    // Determine if there is a class
    function hasClass(ele, cls) {
      return ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
    }
    // //Add a style to the specified dom element
    function addClass(ele, cls) {
      if (!hasClass(ele, cls)) ele.className += " " + cls;
    }
    // //Remove the style of the specified dom element
    function removeClass(ele, cls) {
      if (hasClass(ele, cls)) {
        var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
        ele.className = ele.className.replace(reg, " ");
      }
    }
    // //If it exists (does not exist), delete (add) a style
    // function toggleClass(ele, cls) {
    //   if (hasClass(ele, cls)) {
    //     removeClass(ele, cls);
    //   } else {
    //     addClass(ele, cls);
    //   }
    // }

    document.getElementsByClassName('select-input')[0].onclick = function () {
      var optionsBox = document.getElementsByClassName('options-box')[0];
      var selectInput = document.getElementsByClassName('select-input')[0];
      // Better use children here than childNode, otherwise there will be extra text nodes
      var lis = optionsBox.children;
      if (hasClass(optionsBox, 'hide')) { // If the option state is not currently open
        removeClass(optionsBox, 'hide')
        addClass(selectInput, 'isActive')
        for (var i = 0; i < lis.length; i++) {
          if (lis[i].innerHTML == selectInput.value) { // Activate previous options if they have been previously selected
            addClass(lis[i], 'active')
          } else {
            removeClass(lis[i], 'active')
          }
        }
      } else {
        addClass(optionsBox, 'hide');
        removeClass(selectInput, 'isActive');
      }
    }

    document.getElementsByClassName('options-box')[0].onclick = function (e) {
      var optionsBox = document.getElementsByClassName('options-box')[0];
      var selectInput = document.getElementsByClassName('select-input')[0];
      //This line and the next line are for compatibility with IE8 and below
      e = e || window.event;
      var target = e.target || e.srcElement;
      if (target.tagName.toLowerCase() === "li") {
      	// Assign the selected value to the display box text
        selectInput.value = target.innerHTML;
        // Close Selection List
        addClass(optionsBox, 'hide');
        // Unactivate the display box
        removeClass(selectInput, 'isActive');
      }
    }
	
	// Option Skip Effect in List
    document.getElementsByClassName('options-box')[0].onmouseover = function (e) {
    // Event Agent
      var optionsBox = document.getElementsByClassName('options-box')[0];
      var selectInput = document.getElementsByClassName('select-input')[0];
      e = e || window.event;
      var target = e.target || e.srcElement;
      if (target.tagName.toLowerCase() === "li") {
        if (target.innerHTML != selectInput.value) { //Give temporary skip effect if skipping is not already selected
          addClass(target, 'active');
        }
      }
    }

    document.getElementsByClassName('options-box')[0].onmouseout = function (e) {
      var optionsBox = document.getElementsByClassName('options-box')[0];
      var selectInput = document.getElementsByClassName('select-input')[0];
      //This line and the next line are for compatibility with IE8 and below
      e = e || window.event;
      var target = e.target || e.srcElement;
      if (target.tagName.toLowerCase() === "li") {
        if (target.innerHTML != selectInput.value) { // If the slide is not already selected, cancel the effect of the slide
          removeClass(target, 'active');
        }
      }
    }
  }

summary

Using native JavsScript to achieve results can sometimes be cumbersome, but it's fundamental, other frameworks or third-party plug-ins that can be interpreted as grammatical sugars derived from it or as simplified collections of calls.Thank you all for your constant change. If this article is useful to you, please remember to praise your collection!_