快捷導(dǎo)航

javascript模擬select實(shí)現(xiàn)代碼

更新時(shí)間：2010年08月19日 15:53:08 作者：

記錄一個(gè)自己作的小作品，一個(gè)js模擬的select。

最近迷茫于javascript的閉包與繼承，寫一個(gè)小東西找找感覺。

JS+CSS模擬Select下拉框，選擇表單效果

網(wǎng)頁中使用Select語法實(shí)現(xiàn)的下拉框是很普遍的，但是您有沒有見過使用JS+CSS模擬的Select下拉框？并且可以選擇表單哦，盡管代碼復(fù)雜了點(diǎn)，但是對(duì)于我們了解此類特效非常有幫助。

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>DIV+CSS+JS仿下拉表單</title>  <style type="text/css"> * { margin:0px; padding:0px; } body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; } .cur { cursor:pointer; display:block; color:#788F72; width:71px; height:22px; line-height:22px; padding:0px 0px 0px 2px; } .am { border: 0px; color:#788F72; cursor: pointer; background: url(/uploads/allimg/1111/icon_111.jpg) no-repeat center center; border:1px #ccc solid; display:block; cursor:pointer; width:73px; height: 19px; margin:10px 0px 0px 10px; padding:3px 0px 0px 2px; } .bm { border: 1px #999999 solid; width:73px; margin-left:10px; } </style> </head> <body> <form> <input onclick="hide('HMF-1')" type="text" value="請(qǐng)選擇" id="am" class="am" /> <div   class="wppm3vysvbp"   id="HMF-1" style="display: none " class="bm"> <span id="a1" onclick="pick('測(cè)試一')" onMouseOver="bgcolor('a1')" onMouseOut="nocolor('a1')" class="cur">測(cè)試一</span> <span id="a2" onclick="pick('測(cè)試二')" onMouseOver="bgcolor('a2')" onMouseOut="nocolor('a2')" class="cur">測(cè)試二</span> <span id="a3" onclick="pick('測(cè)試三')" onMouseOver="bgcolor('a3')" onMouseOut="nocolor('a3')" class="cur">測(cè)試三</span> <span id="a4" onclick="pick('測(cè)試四')" onMouseOver="bgcolor('a4')" onMouseOut="nocolor('a4')" class="cur">測(cè)試四</span> <span id="a5" onclick="pick('測(cè)試五')" onMouseOver="bgcolor('a5')" onMouseOut="nocolor('a5')" class="cur">測(cè)試五</span> <span id="a6" onclick="pick('測(cè)試六')" onMouseOver="bgcolor('a6')" onMouseOut="nocolor('a6')" class="cur">測(cè)試六</span> </div> </form> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

這個(gè)作品在沒有任何需求下完成，不保證能應(yīng)用于實(shí)際應(yīng)用，僅用于自娛自樂。

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

用js模擬實(shí)現(xiàn)表單select選擇的功能

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>用js模擬實(shí)現(xiàn)表單select選擇的功能</title> <style type="text/css"> .t_search {width:900px; margin:auto;} .t_s_item {width:100px; float:left;} /* s_select start */ .select_box {cursor:default; text-align:left;} .select_value {border:1px solid; filter:alpha(opacity:0); visibility:hidden; overflow-x:hidden; overflow:auto; position:absolute;} .select_record0 {padding-left:4px; background:#fff; width:100%; color:#000; height:20px; line-height:20px;} .select_record1 {padding-left:4px; background:#ccc; width:100%; color:#000; height:20px; line-height:20px;} /* s_select end */ </style>  </head> <body> <div   id="wppm3vysvbp"   class="t_search"> <form id="form_search" name="form_search" action="userlist.php" method="get"> <div   id="wppm3vysvbp"   class="t_s_item"> <div   id="wppm3vysvbp"   class="select_box" onselectstart="return false" style="width:110px;"> <div onclick="dropdown('value1')" style="width:106px; padding-left:4px; height:17px; padding-top:7px;"> <nobr><label id="text1">選擇類別</label></nobr> </div> <div   id="wppm3vysvbp"   class="select_value" id="value1" style="WIDTH: 108px; HEIGHT: 100px; z-index:100000;"> <div   id="wppm3vysvbp"   class="select_record0" onMouseOver="hiLight(this)" onClick="CheckMe1(this)">類別1</div> <div   id="wppm3vysvbp"   class="select_record0" onMouseOver="hiLight(this)" onClick="CheckMe1(this)">類別2</div> <div   id="wppm3vysvbp"   class="select_record0" onMouseOver="hiLight(this)" onClick="CheckMe1(this)">類別3</div> </div> </div> </div> <div   id="wppm3vysvbp"   class="t_s_item"> <div   id="wppm3vysvbp"   class="select_box" onselectstart="return false" style="width:110px;"> <div onclick="dropdown('value2')" style="width:106px; padding-left:4px; height:17px; padding-top:7px;"> <nobr><label id="text2">年齡</label></nobr> </div> <div   id="wppm3vysvbp"   class="select_value" id="value2" style="WIDTH: 108px; HEIGHT: 100px; z-index:100000;"> <div   id="wppm3vysvbp"   class="select_record0" onMouseOver="hiLight(this)" onClick="CheckMe2(this)">18-25歲</div> <div   id="wppm3vysvbp"   class="select_record0" onMouseOver="hiLight(this)" onClick="CheckMe2(this)">26-32歲</div> </div> </div> </div> <div   id="wppm3vysvbp"   class="t_s_item"> <div   id="wppm3vysvbp"   class="select_box" onselectstart="return false" style="width:110px;"> <div onclick="dropdown('value3')" style="width:106px; padding-left:4px; height:17px; padding-top:7px;"> <nobr><label id="text3">所在地</label></nobr> </div> <div   id="wppm3vysvbp"   class="select_value" id="value3" style="WIDTH: 108px; HEIGHT: 100px; z-index:100000;"> <div   id="wppm3vysvbp"   class="select_record0" onMouseOver="hiLight(this)" onClick="CheckMe3(this)">上海</div> <div   id="wppm3vysvbp"   class="select_record0" onMouseOver="hiLight(this)" onClick="CheckMe3(this)">浙江</div> <div   id="wppm3vysvbp"   class="select_record0" onMouseOver="hiLight(this)" onClick="CheckMe3(this)">福建</div> <div   id="wppm3vysvbp"   class="select_record0" onMouseOver="hiLight(this)" onClick="CheckMe3(this)">廣東</div> </div> </div> </div> <div   id="wppm3vysvbp"   class="t_s_item" style="width:268px;"><input style="width:264px; height:18px; border-style:none; background:none; padding-top:4px; padding-left:4px;" name="keywords" id="keywords" value="請(qǐng)輸入你要找的信息！" type="text" onfocus="javascript:this.value='';" /></div> <div   id="wppm3vysvbp"   class="t_s_item" style="margin-left:11px; width:100px;"><img src="wp-content/uploads/2010/11/t_s_btn.jpg" width="100" height="24" alt="search" border="0" onclick="go_search()" /></div> </form> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

在不改變HTML結(jié)構(gòu)的前提下，可更改其它樣式。建議用IE8與FF瀏覽，可與默認(rèn)樣式進(jìn)行對(duì)比。

發(fā)布一來是為了記錄自己學(xué)習(xí)過程，二來想請(qǐng)朋友指點(diǎn)一下迷津，哪些地方欠妥或者有更好的思路可以給我指點(diǎn)一下，謝謝。

您可能感興趣的文章: