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 相关文章推荐
javascript一些不错的函数脚本代码
Sep 10 Javascript
在IE上直接编辑网页内容的js代码(IE地址栏js)
Apr 27 Javascript
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 Javascript
jQuery ajax分页插件实例代码
Jan 27 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
Feb 14 Javascript
前端构建工具之gulp的语法教程
Jun 12 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
Aug 23 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
Nov 06 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
Apr 08 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
浅谈vue的第一个commit分析
Jun 08 Javascript
完美解决vue 中多个echarts图表自适应的问题
Jul 19 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
php计算两个日期相差天数的方法
2015/03/14 PHP
php实现编辑和保存文件的方法
2015/07/20 PHP
PHP pear安装配置教程
2016/05/14 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
laravel邮件发送的实现代码示例
2020/01/31 PHP
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
用C/C++来实现 Node.js 的模块(二)
2014/09/24 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
Javascript中的getUTCHours()方法使用详解
2015/06/10 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
2015/07/29 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
使用async await 封装 axios的方法
2018/07/09 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
查看django版本的方法分享
2018/05/14 Python
在python中pandas的series合并方法
2018/11/12 Python
在python中按照特定顺序访问字典的方法详解
2018/12/14 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
python hough变换检测直线的实现方法
2019/07/12 Python
Python的matplotlib绘图如何修改背景颜色的实现
2019/07/16 Python
Python 利用高德地图api实现经纬度与地址的批量转换
2019/08/14 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
英国潮流网站:END.(全球免邮)
2017/01/16 全球购物
Notino法国:购买香水和化妆品
2019/04/15 全球购物
局域网定义和特性
2016/01/23 面试题
《蚕姑娘》教学反思
2014/04/15 职场文书
爱护公共设施倡议书
2014/08/29 职场文书
倡议书范文大全
2015/04/28 职场文书
PyTorch的Debug指南
2021/05/07 Python