自定义的一个简单时尚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 相关文章推荐
javascript getElementsByName()的用法说明
Jul 31 Javascript
JS面向对象编程浅析
Aug 28 Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 Javascript
JavaScript中toString()方法的使用详解
Jun 05 Javascript
JS实现的表格行鼠标点击高亮效果代码
Nov 27 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 Javascript
React Native中的RefreshContorl下拉刷新使用
Oct 09 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
Feb 08 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 Javascript
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
javascript canvas实现简易时钟例子
Sep 05 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 类商品秒杀计时实现代码
2010/05/05 PHP
php中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
php解析url的三个示例
2014/01/20 PHP
php使用COPY函数更新配置文件的方法
2015/06/18 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
2012/02/10 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
2013/06/09 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
JavaScript实现的石头剪刀布游戏源码分享
2014/08/22 Javascript
js用拖动滑块来控制图片大小的方法
2015/02/27 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
JS双击变input框批量修改内容
2016/12/12 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
2017/07/18 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
python 计算文件的md5值实例
2017/01/13 Python
Python Socket实现简单TCP Server/client功能示例
2017/08/05 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
浅析Python四种数据类型
2018/09/26 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
pygame库实现俄罗斯方块小游戏
2019/10/29 Python
django框架auth模块用法实例详解
2019/12/10 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
DRF框架API版本管理实现方法解析
2020/08/21 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
HTML5 语义化结构化规范化
2008/10/17 HTML / CSS
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
哈弗商学院毕业生求职信
2014/02/26 职场文书
学校交通安全责任书
2014/08/25 职场文书
农林经济管理专业自荐信
2014/09/01 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书
接触艺术对孩子学习思维有益
2019/08/06 职场文书
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server
nginx之queue的具体使用
2022/06/28 Servers
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js