复制代码 代码如下:
<!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="/UploadFiles/2021-04-02/jquery.js"><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>
效果图
<!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="/UploadFiles/2021-04-02/jquery.js"><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,下拉选择框
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
暂无“自定义的一个简单时尚js下拉选择框”评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。
更新动态
2024年11月14日
2024年11月14日
- 群星《赤热 电视剧音乐原声》[320K/MP3][427.21MB]
- 周华健.1996-爱的光【滚石】【WAV+CUE】
- 杨宗宪.1996-想啥人怨啥人等啥人【有容唱片】【WAV+CUE】
- 郑秀文.2024-Best.Concert.Live【华纳】【FLAC分轨】
- 《Pax Dei》配置要求一览
- 《过山车之心2》存档位置介绍
- 《三国志8 REMAKE》评测：自定义的三国演义
- 群星《少年白马醉春风 网剧OST原声专辑》[320K/MP3][117.05MB]
- 群星《少年白马醉春风 网剧OST原声专辑》[FLAC/分轨][621.04MB]
- 《魏佳艺5CD合集》[WAV分轨][3.8G]
- CSGO职业选手donk怎么样 2024最新donk个人资料介绍
- CSGO职业选手NiKo怎么样 2024最新Niko个人资料介绍
- 剑网3丝路风语PVE焚影怎么打 丝路风语PVE焚影圣诀手法配装攻略
- [老虎魚古典名盘]心碎SACD浪漫小提琴之声[DSF]
- Queen（皇后乐队）《GreatestHitsII》[SACD-DSF]