javascript模拟select实现代码

所属分类：网络编程 / JavaScript 阅读数： 1201

收藏 0赞 0分享

最近迷茫于javascript的闭包与继承，写一个小东西找找感觉。

JS+CSS模拟Select下拉框，选择表单效果

网页中使用Select语法实现的下拉框是很普遍的，但是您有没有见过使用JS+CSS模拟的Select下拉框？并且可以选择表单哦，尽管代码复杂了点，但是对于我们了解此类特效非常有帮助。

<!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>   </head> <body> <form> <input onclick="hide('HMF-1')" type="text" value="请选择" id="am" class="am" /> <div id="HMF-1" style="display: none " class="bm"> <span id="a1" onclick="pick('测试一')" onMouseOver="bgcolor('a1')" onMouseOut="nocolor('a1')" class="cur">测试一</span> <span id="a2" onclick="pick('测试二')" onMouseOver="bgcolor('a2')" onMouseOut="nocolor('a2')" class="cur">测试二</span> <span id="a3" onclick="pick('测试三')" onMouseOver="bgcolor('a3')" onMouseOut="nocolor('a3')" class="cur">测试三</span> <span id="a4" onclick="pick('测试四')" onMouseOver="bgcolor('a4')" onMouseOut="nocolor('a4')" class="cur">测试四</span> <span id="a5" onclick="pick('测试五')" onMouseOver="bgcolor('a5')" onMouseOut="nocolor('a5')" class="cur">测试五</span> <span id="a6" onclick="pick('测试六')" onMouseOver="bgcolor('a6')" onMouseOut="nocolor('a6')" class="cur">测试六</span> </div> </form> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

这个作品在没有任何需求下完成，不保证能应用于实际应用，仅用于自娱自乐。

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

用js模拟实现表单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模拟实现表单select选择的功能</title>   </head> <body> <div class="t_search"> <form id="form_search" name="form_search" action="userlist.php" method="get"> <div class="t_s_item"> <div 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 class="select_value" id="value1" style="WIDTH: 108px; HEIGHT: 100px; z-index:100000;"> <div class="select_record0" onMouseOver="hiLight(this)" onClick="CheckMe1(this)">类别1</div> <div class="select_record0" onMouseOver="hiLight(this)" onClick="CheckMe1(this)">类别2</div> <div class="select_record0" onMouseOver="hiLight(this)" onClick="CheckMe1(this)">类别3</div> </div> </div> </div> <div class="t_s_item"> <div 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 class="select_value" id="value2" style="WIDTH: 108px; HEIGHT: 100px; z-index:100000;"> <div class="select_record0" onMouseOver="hiLight(this)" onClick="CheckMe2(this)">18-25岁</div> <div class="select_record0" onMouseOver="hiLight(this)" onClick="CheckMe2(this)">26-32岁</div> </div> </div> </div> <div class="t_s_item"> <div 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 class="select_value" id="value3" style="WIDTH: 108px; HEIGHT: 100px; z-index:100000;"> <div class="select_record0" onMouseOver="hiLight(this)" onClick="CheckMe3(this)">上海</div> <div class="select_record0" onMouseOver="hiLight(this)" onClick="CheckMe3(this)">浙江</div> <div class="select_record0" onMouseOver="hiLight(this)" onClick="CheckMe3(this)">福建</div> <div class="select_record0" onMouseOver="hiLight(this)" onClick="CheckMe3(this)">广东</div> </div> </div> </div> <div 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="请输入你要找的信息！" type="text" onfocus="javascript:this.value='';" /></div> <div 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需再刷新一下页面才能执行]

在不改变HTML结构的前提下，可更改其它样式。建议用IE8与FF浏览，可与默认样式进行对比。

发布一来是为了记录自己学习过程，二来想请朋友指点一下迷津，哪些地方欠妥或者有更好的思路可以给我指点一下，谢谢。

更多精彩内容其他人还在看

javascript模拟select实现代码

BootStrap数据表格实例代码

基于vue的短信验证码倒计时demo

详解React Native开源时间日期选择器组件(react-native-datetime)

JS库particles.js创建超炫背景粒子插件(附源码下载)

JS库之Waypoints的用法详解

强大的JavaScript响应式图表Chartist.js的使用

详解wow.js中各种特效对应的类名

JS库之Highlight.js的用法详解

详解动画插件wow.js的使用方法

JS库 Highlightjs 添加代码行号的实现代码

网络赚钱

站长故事