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 相关文章推荐
js 异步处理进度条
Apr 01 Javascript
javascript 文章截取部分无损html显示实现代码
May 04 Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 Javascript
vuex实现简易计数器
Oct 27 Javascript
详解Javascript百度地图接口开发文档中的类和方法
Feb 07 Javascript
Bootstrap导航条学习使用(二)
Feb 08 Javascript
移动端利用H5实现压缩图片上传功能
Mar 29 Javascript
浅谈ES6新增的数组方法和对象
Aug 08 Javascript
jquery插件开发之选项卡制作详解
Aug 30 jQuery
一步步教会你微信小程序的登录鉴权
Apr 09 Javascript
判断JavaScript中的两个变量是否相等的操作符
Dec 21 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
很实用的一个完整email发送程序
2006/10/09 PHP
发布一个用PHP fsockopen写的HTTP下载的类
2007/02/22 PHP
PHP基于单例模式实现的mysql类
2016/01/09 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
PHP编程获取图片的主色调的方法【基于Imagick扩展】
2017/08/02 PHP
PHP实现随机数字、字母的验证码功能
2018/08/01 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
js玩一玩WSH吧
2007/02/23 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
2012/08/14 Javascript
判断js对象是否拥有某一个属性的js代码
2013/08/16 Javascript
jquery实现弹出层登录和全屏层注册特效
2015/08/28 Javascript
javascript 解决浏览器不支持的问题
2016/09/24 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
vue 页面加载进度条组件实例
2018/02/05 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
Node.js使用Angular简单示例
2018/05/11 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
2018/05/12 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
JavaScript之Blob对象类型的具体使用方法
2019/11/29 Javascript
Python八皇后问题解答过程详解
2019/07/29 Python
在macOS上搭建python环境的实现方法
2019/08/13 Python
pycharm实现print输出保存到txt文件
2020/06/01 Python
详解python命令提示符窗口下如何运行python脚本
2020/09/11 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
2017/08/01 HTML / CSS
中文系学生自荐信范文
2013/11/13 职场文书
计算机专业毕业生的自我评价
2013/11/18 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
2014年安全员工作总结
2014/11/13 职场文书
2014年小学教导处工作总结
2014/12/19 职场文书
工作检讨书大全
2015/01/26 职场文书
导游词幽默开场白
2019/06/26 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang
整理Python中常用的conda命令操作
2021/06/15 Python