碼上歡樂
首頁
榜單
標簽
關於
搜索
相關內容
簡體
繁體
自己動手模擬百分百
下拉列表 本文轉載自 查看原文 2014-12-05 17:40 3304 select>/ 下拉列表/ < 瀏覽器默認的下拉確實不好用啊，主要是樣式不好修改和統一。 (一)下手之前先理清一下<select>的流程: 1.結構：<select> <option value="">show</option> </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> × 免責聲明！ 本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。 猜您在找 給DIV設置高度百分百 css的邊界margin/padding的百分百是父元素寬度的百分百 Select多選框下拉列表 消息隊列如何保證消息能百分百成功被消費 百分百解決Job for network.service failed. See 'system的問題 寫個軟件來防止服務器網站CPU百分百 自己動手模擬開發一個簡單的Web服務器 面試官：CPU百分百！給你一分鍾，怎么排查？有幾種方法？ 使用bootstrap-select完成可搜索的多選下拉列表 純css修改下拉列表select的默認樣式 粵ICP備18138465號 © 2018-2025 CODEPRJ.COM
