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中的eval函数
Nov 02 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 Javascript
JavaScript中匿名、命名函数的性能测试
Sep 04 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
javascript实现动态导入js与css等静态资源文件的方法
Jul 25 Javascript
JavaScript实现算术平方根算法-代码超简单
Sep 11 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
Jan 04 Javascript
vue父子组件的数据传递示例
Mar 07 Javascript
浅析JS中回调函数及用法
Jul 25 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
Mar 21 Javascript
Vue中错误图片的处理的实现代码
Nov 07 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 无极分类(递归)实现代码
2010/01/05 PHP
浅谈使用 PHP 进行手机 APP 开发(API 接口开发)
2014/08/11 PHP
WordPress中is_singular()函数简介
2015/02/05 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
laravel 模型查询按照whereIn排序的示例
2019/10/16 PHP
Extjs入门之动态加载树代码
2010/04/09 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
深入理解JQuery中的事件与动画
2016/05/18 Javascript
浅谈js中子页面父页面方法 变量相互调用
2016/08/04 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
Angular 如何使用第三方库的方法
2018/04/18 Javascript
element-ui upload组件多文件上传的示例代码
2018/10/17 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
详解JS实现系统登录页的登录和验证
2019/04/29 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
Python打印斐波拉契数列实例
2015/07/07 Python
Python字典及字典基本操作方法详解
2018/01/30 Python
python爬取各类文档方法归类汇总
2018/03/22 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
Boda Skins皮衣官网:奢侈皮夹克,全球配送
2016/12/15 全球购物
如何用Python输出一个Fibonacci数列
2016/08/28 面试题
无偿献血倡议书
2014/04/14 职场文书
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
2014年重阳节老干部座谈会局领导发言稿
2014/09/25 职场文书
单位委托书格式范本
2014/09/29 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
python3 删除所有自定义变量的操作
2021/04/08 Python
HashMap实现保存两个key相同的数据
2021/06/30 Java/Android