模擬select下拉選單詳解

admin發表於2018-11-20

本章節分享一段程式碼例項，它模擬紅絲線了select下拉選單效果。

畢竟自帶的<select>下拉控制元件不夠美觀。

程式碼例項如下: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<title>模擬select</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
body {
  background-color: #dadada;
}
li {
  list-style: none;
}
.select_div {
  position: relative;
  width: 250px;
  margin: 50px auto;
  border: 1px solid #d2d2d2;
  background-color: #fff;
  -webkit-user-select: none; /* Chrome all / Safari all */
  -moz-user-select: none; /* Firefox all */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
}
.select_spn {
  display: block;
  padding: 10px;
  padding-right: 20%;
  background: url(images/icon1.png) no-repeat;
  background-position: 95% center;
  background-size: 0.8em;
  cursor: pointer;
}
.option_list {
  position: absolute;
  left: 0;
  bottom: -97px;
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #d2d2d2;
  display: none;
}
.option_list > li {
  padding: 5px 10px;
}
.option_list > li:hover {
  background-color: #23d;
  color: #fff;
}
</style>
<script type="text/javascript">
window.onload=function(){
  // 自執行
  (function(){
    // 獲取元素  支援ie8+
    var aBtn1=$(".select_spn");
    var aBox=$(".option_list");
    var aLi=null;
    // 迴圈繫結事件
    for (var index = 0, len = aBtn1.length; index < len; index++) {
      // 開關
      aBtn1[index].isShow = true;
      // 繫結開啟框子
      aBtn1[index].onclick = function (e) {
        for(var j=0;j<len;j++){
          aBtn1[j].parentNode.style.zIndex=1;
        }
        this.parentNode.style.zIndex=100;
        var list_obj=getNextEle(this);
        // 先關閉所有的框子
        list_obj.style.display="none";
        if(this.isShow){
          this.isShow=false;
          list_obj.style.display="block";
        }
        else {
          this.isShow=true;
          list_obj.style.display="none";
        }
        // 取消事件冒泡
        stopBubble(e);
      }
    }
    // 點選任意一處關閉框子
   document.onclick=function(e){
     for (var index = 0, len = aBox.length; index < len; index++) {
       aBox[index].style.display = "none";
       aBtn1[index].isShow = true;
     }
   }
   // 選中專案
   for (var index = 0, len = aBox.length; index < len; index++) {
     var aLi = $("li", aBox[index]);
     for(var j=0,li_len=aLi.length;j<li_len;j++){
       aLi[j].point_ele = index;
       aLi[j].onclick=function(){
         var txt=this.getAttribute("value")?this.getAttribute("value"):"";
         aBtn1[this.point_ele].innerHTML=txt;
         aBtn1[this.point_ele].setAttribute("value",txt);
       }
     }
   }
 })();
}
  
// 獲取元素
function $(str,oPar){
  var a=oPar?oPar.querySelectorAll(str):document.querySelectorAll(str);
  if(str.indexOf("#")!=-1){
    a[0].index=0;
    return a[0]
  }
  else {
    for (var index = 0, len = a.length; index < len; index++) {
      a[index].index = index;
    }
    return a;
  }
}
function getNextEle(obj){
  if(obj.nextSibling!="undefined"){
    if(obj.nextSibling.nodeType==1){
      return obj.nextSibling;
    }
    else {
      return arguments.callee(obj.nextSibling);
    }
  }else {
    return null
  }
}
// 阻止事件冒泡
function stopBubble(e){
  if(e && e.stopPropagation){
    e.stopPropagation();
  }
  else{
    window.event.cancelBubble=true;
  }
  return false;
}
</script>
</head>
<body>
  <div class="select_div" id="div1">
    <span class="select_spn" value="value">我是選中項</span>
    <ul class="option_list">
      <li value="上海">上海</li>
      <li value="廣東">廣東</li>
      <li value="南京">南京</li>
    </ul>
  </div>
  <div class="select_div" id="div2">
    <span class="select_spn" value="value">我是選中項</span>
    <ul class="option_list">
      <li value="上海">上海</li>
      <li value="廣東">廣東</li>
      <li value="南京">南京</li>
    </ul>
  </div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.window.onload=function(){}，當文件內容完全載入完畢再去執行函式中的程式碼。

（2）.(function(){})()，一個匿名自執行函式。

（3）.var aBtn1=$(".select_spn")，獲取指定的元素，$()函式在後面會介紹。

（4）.var aLi=null，宣告一個變數，並賦值為null。

（5）.for (var index = 0, len = aBtn1.length; index < len; index++) {}，遍歷集合中的每一個元素，這裡是模擬實現的select下拉選單的span元素。

（6）.aBtn1[index].isShow = true，為當前元素物件新增一個isShow屬性，並賦值為true，作用後面介紹。

（7）.aBtn1[index].onclick = function (e) {},為span元素註冊onclick事件處理函式。

（8）for(var j=0;j<len;j++){

  aBtn1[j].parentNode.style.zIndex=1;

}，將所有span元素的父元素，也就是div元素的z-index屬性值設定為1。

（9）.this.parentNode.style.zIndex=100，將當前span元素的父元素的z-index屬性值設定為100，當前下拉選單就可以覆蓋另一個。

（10）.var list_obj=getNextEle(this),獲取span元素的下一個元素，也就是下拉選單ul元素。

（11）.list_obj.style.display="none"，下拉選單隱藏。

（12）.if(this.isShow){

  this.isShow=false;

  list_obj.style.display="block";

}

else {

this.isShow=true;

  list_obj.style.display="none";

},根據isShow識別符號的值，來設定下拉選單的隱藏和顯示。

（13）.stopBubble(e)，取消時間冒泡，因為在後面程式碼中，document也註冊有onclick事件處理函式。

（14）.document.onclick=function(e){

  for (var index = 0, len = aBox.length; index < len; index++) {

    aBox[index].style.display = "none";

    aBtn1[index].isShow = true;

  }

}，點選文件任意地方可以隱藏下拉選單。

（15）.for (var index = 0, len = aBox.length; index < len; index++) {

  var aLi = $("li", aBox[index]);

  for(var j=0,li_len=aLi.length;j<li_len;j++){

    aLi[j].point_ele = index;

    aLi[j].onclick=function(){

      var txt=this.getAttribute("value")?this.getAttribute("value"):"";

      aBtn1[this.point_ele].innerHTML=txt;

      aBtn1[this.point_ele].setAttribute("value",txt);

     }

   }

}，遍歷每一個ul元素，並且獲取其中的li元素集合。

然後為這些li元素註冊click事件處理函式，規定當點選li元素的時候來設定span元素的html內容和value屬性值。

（16).關於$()方法和getNextEle()方法實現了參閱相關閱讀。

二.相關閱讀:

（1）.parentNode參閱JavaScript parentNode 屬性一章節。

（2）.getAttribute()參閱JavaScript getAttribute()一章節。

（3）.setAttribute()參閱JavaScript setAttribute()一章節。

（4）.innerHTML參閱JavaScript innerHTML 屬性一章節。

相關文章