自定义的一个简单时尚js下拉选择框


Posted in Javascript onNovember 20, 2013
<!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=utf-8" /> 
<title>statistics test</title> 
<script src="../js/jquery.js"></script> 
<style type="text/css"> 
.dropdiv{ 
width: 180px; 
height: 24px; 
overflow: hidden; 
float: left; 
font-size: 13px; 
font-family: "微软雅黑"; 
position: relative; 
padding: 0px 26px 0px 5px; 
border: solid 1px #cecece; 
background: url(../images/droparrow.png) 186px no-repeat; 
} 
.dropmiandiv{ 
margin-left: 40px; 
width: 213px; 
background: url(../images/dropdown.png) repeat-x; 
height: 27px; 
} 
.chooseItems{ 
border: solid 1px #cecece; 
} 
.chooseItems .chooseItem{ 
font-size: 13px; 
font-family: "微软雅黑"; 
padding: 5px; 
border-bottom: solid 1px #cecece; 
} 
.chooseItems .chooseItem:last-child{ 
border-bottom:none; 
} 
.chooseItems .chooseItem:hover{ 
background: #f2f2f2; 
} 
</style> 
</head> <body> 
<div class="dropmiandiv" quest ="select1"> 
<input type="text" readonly="readonly" id ="select1" displayMember="-1" valueMember ="请选择" class="dropdiv" value="请选择"/> 
</div> 
<div class="chooseItems" answer ="select1" style="display:none; position:absolute;"> 
<div class="chooseItem" displayMember="0" valueMember ="独立注册译员">独立注册译员</div> 
<div class="chooseItem" displayMember="1" valueMember ="供应商译员">供应商译员</div> 
<div class="chooseItem" displayMember="2" valueMember ="供应商">供应商</div> 
<div class="chooseItem" displayMember="3" valueMember ="代理商">代理商</div> 
</div> 
<div class="dropmiandiv" quest ="select2" style="position:absolute;top:200px;"> 
<input type="text" readonly="readonly" id ="select2" displayMember="-1" valueMember ="请选择" class="dropdiv" value="请选择"/> 
</div> 
<div class="chooseItems" answer ="select2" style="display:none; position:absolute;"> 
<div class="chooseItem" displayMember="0" valueMember ="独立注册译员">独立注册译员</div> 
<div class="chooseItem" displayMember="1" valueMember ="供应商译员">供应商译员</div> 
<div class="chooseItem" displayMember="2" valueMember ="供应商">供应商</div> 
<div class="chooseItem" displayMember="3" valueMember ="代理商">代理商</div> 
</div> 
</body> 
</html> 
<script type="text/javascript"> 
$(".dropdiv").click(function(e){ 
$(".chooseItems").slideUp(300); 
e.stopPropagation(); 
var quest = $(this).parent(); 
var questwidth = parseInt(quest.width())-2; 
var questheight = quest.height(); 
var left = quest.position().left+parseInt(quest.css("margin-left"))+parseInt(quest.css("padding-left")); 
var top = parseInt(quest.position().top)+parseInt(questheight)+4; 
var attrs = quest.attr("quest"); 
var selectsd = $('.chooseItems[answer='+attrs+']'); 
var selectsdHeight = selectsd.height(); 
if((top+selectsdHeight)>$(window).height()){ 
top = top - selectsdHeight - questheight-7; 
} 
if($(selectsd).is(":visible")){ 
$(selectsd).slideUp(300); 
}else{ 
$(selectsd).css({"left":left+"px","top":top+"px","width":questwidth+"px"}).slideDown(300); 
} 
}); 
$(".chooseItem").click(function(e){ 
e.stopPropagation(); 
var divhtml = $(this); 
var displayMember,valueMember; 
displayMember = divhtml.attr("displayMember"); 
valueMember = divhtml.attr("valueMember"); 
var attrs =$(this).parent().attr("answer"); 
var parent = $("#"+attrs); 
var olddisplayMember,oldvalueMember; 
olddisplayMember = parent.attr("displayMember"); 
oldvalueMember = parent.attr("valueMember"); 
if(olddisplayMember !=displayMember){ 
parent.attr("displayMember",displayMember); 
parent.attr("valueMember",valueMember); 
parent.val(valueMember); 
parent.change(); 
} 
$(this).parent().slideUp(300); 
}); 
$(document).click(function(e){ 
var target = $(e.target); 
if(target.closest(".chooseItems").length == 0){ 
$(".chooseItems").slideUp(300); 
} 
}); 
</script>

效果图
自定义的一个简单时尚js下拉选择框
Javascript 相关文章推荐
最简单的jQuery程序 入门者学习
Jul 09 Javascript
javascript基础第一章 JavaScript与用户端
Jul 22 Javascript
eval与window.eval的差别分析
Mar 17 Javascript
Jquery中对数组的操作代码
Aug 12 Javascript
javascript学习笔记(二) js一些基本概念
Jun 18 Javascript
三种方式获取XMLHttpRequest对象
Apr 21 Javascript
js+HTML5实现视频截图的方法
Jun 16 Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 Javascript
微信小程序本地缓存数据增删改查实例详解
May 24 Javascript
vue实现搜索过滤效果
May 28 Javascript
微信小程序聊天功能的示例代码
Jan 13 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 Javascript
jQuery对html元素取值与赋值的方法
Nov 20 #Javascript
客户端js判断文件类型和文件大小即限制上传大小
Nov 20 #Javascript
JS保留两位小数 四舍五入函数的小例子
Nov 20 #Javascript
使用js简单实现了tree树菜单
Nov 20 #Javascript
js 用CreateElement动态创建标签示例
Nov 20 #Javascript
JS实现字体选色板实例代码
Nov 20 #Javascript
jquery实现树形二级菜单实例代码
Nov 20 #Javascript
You might like
PHP新手上路(六)
2006/10/09 PHP
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
Zend Framework框架之Zend_Mail实现发送Email邮件验证功能及解决标题乱码的方法
2016/03/21 PHP
PHP经典算法集锦【经典收藏】
2016/09/14 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
2008/09/08 Javascript
HTML node相关的一些资料整理
2010/01/01 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
2018/10/24 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
Python中针对函数处理的特殊方法
2014/03/06 Python
用Python输出一个杨辉三角的例子
2014/06/13 Python
Python实现数通设备端口使用情况监控实例
2015/07/15 Python
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
Python基于opencv实现的简单画板功能示例
2019/03/04 Python
在django view中给form传入参数的例子
2019/07/19 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
2015/04/24 HTML / CSS
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
如何提高JDBC的性能
2013/04/30 面试题
介绍一下Linux文件的记录形式
2012/04/18 面试题
2014年中秋节活动总结
2014/08/29 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
中秋客户感谢信
2015/01/22 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
2019让人心动的商业计划书
2019/06/27 职场文书
python执行js代码的方法
2021/05/13 Python
Python 语言实现六大查找算法
2021/06/30 Python
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers