自己動手模拟百分百<select>下拉清單

浏覽器預設的下拉确實不好用啊，主要是樣式不好修改和統一。

(一)下手之前先理清一下<select>的流程:

　　1.結構：<select>

</select>

　　2.事件：點選<select>-選擇<option>-顯示option的innerHTML-表單value改變-onchange被觸發

(二)接着寫出dom結構并設計一個樣式:

　　1.dom結構如下：

<div id="selectYear">
    <div class="select-ipt"></div><!--顯示框，存放span的innerHTML,相當于option的innerHTML-->
    <div style="display: none " class="select-list"><!--下拉框-->
      <span id="1">1992</span><!--N個span-->
    </div>
    <input type="hidden" /><!--存放span的id，相當于option的value-->
</div>

　　2.css樣式，下拉框需要一個下三角圖檔居右，圖檔就不上傳了，也可以自己用css模拟下三角。樣式可以定義多種，樣式名稱改變不會影響js。

/*下拉框*/
.select-ipt {color:#888888;cursor: pointer;background: url(select.jpg) no-repeat center right;
border:1px #ccc solid;cursor:pointer;width:73px;height: 29px;margin:0px 0px 0px 0px;padding:3px 0px 0px 0px;
line-height:29px;font-size:14px;}
/*樣式一：下拉一排一個*/
.select-list {border: 1px #ccc solid;width:73px;margin-left:0px;position:absolute;z-index:10000;background:#fff;}
.select-list span{cursor:pointer;display:block;width:100%;height:22px;line-height:22px;padding:0;font-size:14px;}
.select-list span:hover{background:#f6615b;color:#fff}

(三)開始寫JS：

1.根據id綁定dom

function SelectPullDown(box){
    this.selectBox = document.getElementById(box);
    this.selectIpt = document.getElementById(box).getElementsByTagName("input")[0];//傳值表單
    this.selectDivBtn = document.getElementById(box).getElementsByTagName("div")[0];//選中顯示框
    this.selectDivList = document.getElementById(box).getElementsByTagName("div")[1];////下拉框
    this.selectSpan = document.getElementById(box).getElementsByTagName("span");//選項
}

//調用方法
var year = new SelectPullDown('selectYear');
year.init();

2.定義原型方法，開始模拟：

很簡單，主要就是定義顯示隐藏和點選事件，然後修改值，最後手動觸發onchange事件，onchange事件必須有，友善以後的js驗證。

SelectPullDown.prototype ={
    selectBox : ''，
    selectIpt : '',
    selectDivBtn : '',
    selectDivList : '',
    selectSpan : '',
    iptEven : function(){
        var self = this;
        this.selectBox.onmouseover = function(){
            self.selectListShow();
        }    
        this.selectBox.onmouseout = function(){
            self.selectListHide();
        }
        return this;    
    },
    selectListShow: function(){
        this.selectDivList.style.display = "block";
    },
    selectListHide: function(){
        this.selectDivList.style.display = "none";
    },
    selectPick : function() {
        var span = this.selectSpan,
        self = this;
        function trimStr(str){return str.replace(/(^\s*)|(\s*$)/g,"");}
        for(var i=0;i<span.length;i++){
            span[i].onclick = function(){
                self.selectDivBtn.innerHTML = trimStr(this.innerHTML);
                self.selectIpt.value= trimStr(this.id);
                self.selectListHide();
                //chang事件觸發
                if (self.selectIpt.fireEvent) self.selectIpt.fireEvent('onchange');
                else{ 
                    var evt;
                    evt = document.createEvent("HTMLEvents");  
                    evt.initEvent("change", true, true);  
                    self.selectIpt.dispatchEvent(evt);
                };
            }
        }    
        return this;
    },
    init : function(){
        this.iptEven().selectPick();    
    }
};

（四）完整代碼如下（試着用下吧）：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉表單</title>
<style type="text/css">
* {
    margin:0px;
    padding:0px;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
/*下拉框*/
.select-ipt {color:#888888;cursor: pointer;background: url(select.jpg) no-repeat center right;
border:1px #ccc solid;cursor:pointer;width:73px;height: 29px;margin:0px 0px 0px 0px;padding:3px 0px 0px 0px;
line-height:29px;font-size:14px;}
/*樣式一：下拉一排一個*/
.select-list {border: 1px #ccc solid;width:73px;margin-left:0px;position:absolute;z-index:10000;background:#fff;}
.select-list span{cursor:pointer;display:block;width:100%;height:22px;line-height:22px;padding:0;font-size:14px;}
.select-list span:hover{background:#f6615b;color:#fff}

</style>
</head>
<body>
<div id="selectYear">
    <div class="select-ipt">請選擇</div><!--顯示框，存放span的innerHTML,相當于option的innerHTML-->
    <div style="display: none " class="select-list"><!--下拉框-->
      <span id="1">1992</span>
      <span id="2">1993</span>
      <span id="3">1994</span>
      <span id="4">1995</span>
      <span id="5">1996</span> 
      <span id="6">1997</span> 
    </div>
    <input type="hidden" /><!--存放span的id，相當于option的value-->
</div>  

<script type="text/javascript" >
function SelectPullDown(box){
    this.selectBox = document.getElementById(box);
    this.selectIpt = document.getElementById(box).getElementsByTagName("input")[0];//傳值表單
    this.selectDivBtn = document.getElementById(box).getElementsByTagName("div")[0];//選中顯示框
    this.selectDivList = document.getElementById(box).getElementsByTagName("div")[1];////下拉框
    this.selectSpan = document.getElementById(box).getElementsByTagName("span");//選項
}
SelectPullDown.prototype ={
    selectBox : '',//document.getElementById('selectYear').getElementsByTagName("input")[0],
    selectIpt : '',//document.getElementById('selectYear').getElementsByTagName("input")[0],
    selectDivBtn : '',//document.getElementById('selectYear').getElementsByTagName("div")[0],
    selectDivList : '',//document.getElementById(box).getElementsByTagName("div")[1];
    selectSpan : '',//document.getElementById('selectYear').getElementsByTagName("span"),
    iptEven : function(){
        var self = this;
        this.selectBox.onmouseover = function(){
            self.selectListShow();
        }    
        this.selectBox.onmouseout = function(){
            self.selectListHide();
        }
        return this;    
    },
    selectListShow: function(){
        this.selectDivList.style.display = "block";
    },
    selectListHide: function(){
        this.selectDivList.style.display = "none";
    },
    selectPick : function() {
        var span = this.selectSpan,
        self = this;
        function trimStr(str){return str.replace(/(^\s*)|(\s*$)/g,"");}
        for(var i=0;i<span.length;i++){
            span[i].onclick = function(){
                self.selectDivBtn.innerHTML = trimStr(this.innerHTML);
                self.selectIpt.value= trimStr(this.id);
                self.selectListHide();
                //chang事件觸發
                if (self.selectIpt.fireEvent) self.selectIpt.fireEvent('onchange');
                else{ 
                    var evt;
                    evt = document.createEvent("HTMLEvents");  
                    evt.initEvent("change", true, true);  
                    self.selectIpt.dispatchEvent(evt);
                };
            }
        }    
        return this;
    },
    init : function(){
        this.iptEven().selectPick();    
    }
};
//調用方法
var year = new SelectPullDown('selectYear');
year.init();


</script>
</body>
</html>

有沒有人打賞？沒有的話，那我晚點再來問問。

關注大詩人公衆号，第一時間擷取最新文章。

如果你有購買鋼琴的打算，可以從這裡了解到在售資訊，價格實惠品質保障。

---轉發請标明，并添加原文連結---

自己動手模拟百分百<select>下拉清單

繼續閱讀

請教大神指點，為什麼我的hw67promax不能接打電話，下拉清單裡面也沒有通話連接配接藍牙功能

下拉菜單的兩種實作方式：CSS和JS

Excel表格實操練習。使用Excel圖表可以更加直覺生動的展現資料分析結果。例如在09年office圖書銷量分析工作表

Axure高保真原型：多選下拉清單

Angular JS筆記

安卓控件使用系列25：Spinner下拉清單控件的使用方法

autocomplete 異步聯想下拉資料

POI設定Excel下拉清單（資料有效性驗證）

【測試開發全棧--HTML】(20) 表單元素業務整合示例

HTML下拉清單的左右選擇

java程式設計産檢類型題 --- 程式界面[庫存查詢]

下拉清單預設選中--- jQuery

這可怎麼彙總統計喲~神奇的下拉清單怎麼做？

Android 下拉清單Spinner控件

PyQt5 下拉清單控件案例代碼

Vue實作數組四級關聯的實戰分享與問題解決方案

自己動手模拟百分百&lt;select&gt;下拉清單

繼續閱讀

自己動手模拟百分百<select>下拉清單