div模拟选择框示例代码


Posted in Javascript onNovember 03, 2013

html原有标签可以满足我们需求,有时为了使界面更加美观,就需要自己写出来一些列标签供使用,这次项目就有这个要求了,模拟选项框

<!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>ul模拟select</title> 
<script type="text/javascript" src="jquery-1.8.2.min.js"></script> 
<style type="text/css"> .select_box {width:150px; position:relative; margin:10px;padding:0; font-size:12px;} 
.submit_box {width:180px; position:relative; margin:10px;padding:0; font-size:12px; text-align:center;} 
ul,li {list-style-type:none; padding:0; margin:0} 
.select_box input {cursor:pointer; display:block; line-height:25px; width:100%; height:25px; overflow:hidden;border:1px solid #ccc; padding-right:20px; padding-left:10px; } 
.select_box ul {width:180px; position:absolute; left:0; top:25px; border:1px solid #ccc; background:#fff; overflow: hidden;display:none; background:#ebebeb; z-index:99999;} 
.select_box ul li {display:block;height:30px;overflow:hidden;line-height:30px;padding-left:5px;width:100%;cursor:pointer;} 
.hover {background:#ccc;} 
</style> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$(".select_box input").click(function(){ 
var thisinput=$(this); 
var thisul=$(this).parent().find("ul"); 
if(thisul.css("display")=="none"){ 
//显示出来滚动条 
if(thisul.height()>200){thisul.css({height:"200"+"px","overflow-y":"scroll" })}; 
thisul.fadeIn("100"); 
thisul.hover(function(){},function(){thisul.fadeOut("100");}); 
//连续多个事件 
thisul.find("li").click( 
function(){thisinput.val($(this).text());thisul.fadeOut("100");}).hover(function(){$(this).addClass("hover");},function(){$(this).removeClass("hover");}); 
} 
else{ 
thisul.fadeOut("fast"); 
} 
}) 
}); 
</script> 
</head> 
<body> 
<div class="select_box"><input id="myselect" type="text" value="请选择..." readonly="readonly"> 
<ul class="select_ul"> 
<li>2013年</li> 
<li>2012年</li> 
<li>2011年</li> 
<li>2010年</li> 
<li>2009年</li> 
<li>2008年</li> 
<li>2007年</li> 
<li>2006年</li> 
<li>2005年</li> 
<li>2013年2013年2013年2013年2013年</li> 
</ul> 
</div> 
<select style='margin-top:250px;'> 
<option>2013年</option> 
<option>2012年</option> 
<option>2011年</option> 
<option>2010年</option> 
<option>2009年</option> 
<option>2008年</option> 
</select> 
</body> 
</html>

两个效果进行比较
div模拟选择框示例代码
Javascript 相关文章推荐
图片onload事件触发问题解决方法
Jul 31 Javascript
js实现的仿新浪微博完美的时间组件升级版
Dec 20 Javascript
DOM 事件流详解
Jan 20 Javascript
纯Javascript实现ping功能的方法
Mar 20 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
Jun 18 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
简单实现js页面切换功能
Jan 10 Javascript
关于Jquery中的事件绑定总结
Oct 26 Javascript
JavaScript实用代码小技巧
Aug 23 Javascript
JavaScript仿京东秒杀倒计时
Mar 17 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
Nov 01 #Javascript
Javascript中string转date示例代码
Nov 01 #Javascript
文档对象模型DOM通俗讲解
Nov 01 #Javascript
原生js ActiveXObject获取execl里面的值
Nov 01 #Javascript
框架页面高度自动刷新的Javascript脚本
Nov 01 #Javascript
JS滚轮事件onmousewheel使用介绍
Nov 01 #Javascript
JS实现拖动示例代码
Nov 01 #Javascript
You might like
香妃
2021/03/03 冲泡冲煮
NOT NULL 和NULL
2007/01/15 PHP
php弹出对话框实现重定向代码
2014/01/23 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
JavaScript?Apple设备检测示例代码
2013/11/15 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
2015/11/06 Javascript
Bootstrap实现响应式导航栏效果
2015/12/28 Javascript
javascript事件绑定学习要点
2016/03/09 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
Wireshark基本介绍和学习TCP三次握手
2016/08/15 Javascript
深入理解JavaScript中的for循环
2017/02/07 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
用js实现放大镜效果
2020/10/28 Javascript
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
Python发送email的3种方法
2015/04/28 Python
Python中关于使用模块的基础知识
2015/05/24 Python
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
Python的Flask框架中配置多个子域名的方法讲解
2016/06/07 Python
TFRecord格式存储数据与队列读取实例
2020/01/21 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
python中取绝对值简单方法总结
2020/07/24 Python
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
2018/06/12 HTML / CSS
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
美国知名的百货清仓店:Neiman Marcus Last Call
2016/08/03 全球购物
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
个人找工作求职简历的自我评价
2013/10/20 职场文书
茶叶店创业计划书范文
2014/01/19 职场文书
小班评语大全
2014/05/04 职场文书