源码网商城，靠谱的源码在线交易网站我的订单购物车帮助

当前位置：首页 > 资讯 > 技术文档

javascript模拟select实现代码

时间：2020-03-14 21:32 编辑：来源：阅读：
扫一扫，手机访问

摘要：javascript模拟select实现代码

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

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

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

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

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

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

[b]用js模拟实现表单select选择的功能

[/b]

<meta content="text/html; charset=gb2312" http-equiv="Content-Type"></meta> 
用js模拟实现表单select选择的功能 
 
 
 
 
<div class="t_search"> 
<form action="userlist.php" id="form_search" method="get" name="form_search"> 
<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" onclick="CheckMe1(this)" onmouseover="hiLight(this)">类别1</div> 
<div class="select_record0" onclick="CheckMe1(this)" onmouseover="hiLight(this)">类别2</div> 
<div class="select_record0" onclick="CheckMe1(this)" onmouseover="hiLight(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" onclick="CheckMe2(this)" onmouseover="hiLight(this)">18-25岁</div> 
<div class="select_record0" onclick="CheckMe2(this)" onmouseover="hiLight(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" onclick="CheckMe3(this)" onmouseover="hiLight(this)">上海</div> 
<div class="select_record0" onclick="CheckMe3(this)" onmouseover="hiLight(this)">浙江</div> 
<div class="select_record0" onclick="CheckMe3(this)" onmouseover="hiLight(this)">福建</div> 
<div class="select_record0" onclick="CheckMe3(this)" onmouseover="hiLight(this)">广东</div> 
</div> 
</div> 
</div> 
<div class="t_s_item" style="width:268px;"><input id="keywords" name="keywords" onfocus="javascript:this.value='';" style="width:264px; height:18px; border-style:none; background:none; padding-top:4px; padding-left:4px;" type="text" value="请输入你要找的信息！"></input></div> 
<div class="t_s_item" style="margin-left:11px; width:100px;">[img]http://www.1sucai.cn/article/wp-content/uploads/2010/11/t_s_btn.jpg[/img]
</img></div> 
</form> 
</div>

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

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

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

全部评论(0)

上一篇：js 获取子节点函数 (兼容FF与IE)
下一篇：javascript radio 联动效果

资讯排行榜
更多>>

关于我们 | 广告合作 | 联系我们 | 隐私条款 | 免责声明 | 网站地图

苏ICP备2024110244号-2 苏公网安备32050702011978号增值电信业务经营许可证编号：苏B2-20251499 | Copyright 2018 - 2025 源码网商城 (www.ymwmall.com) 版权所有

联系客服

客服电话：
400-000-3129

微信版

扫一扫进微信版

返回顶部