js 自定義個(gè)性下拉選擇框示例
更新時(shí)間:2013年08月20日 15:44:48 作者:
下拉選擇框想必大家并不陌生,一邊情況下都是使用默認(rèn)的,為了打破傳統(tǒng),下面與大家分享下使用js自定義下拉選擇框示例代碼,感興趣的朋友可以參考下
復(fù)制代碼 代碼如下:
<!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>
<link type="text/css" rel="stylesheet" href="../css/statistics.css"/>
<script src="../js/jquery.js"></script>
<style type="text/css">
.dropdiv{
width: 177px;
height: 16px;
overflow: hidden;
float: left;
font-size: 13px;
font-family: "微軟雅黑";
position: relative;
padding: 5px;
}
.drpdown{
width: 214px;
height: 24px;
font-size: 13px;
font-family:"微軟雅黑";
position: relative;
border:none;
padding-top:4px;
background:url(../images/dropdown.png) repeat-x;
}
.drpdown:active{
width: 214px;
height: 24px;
font-size: 13px;
font-family:"微軟雅黑";
position: relative;
border:none;
padding-top:4px;
background:url(../images/dropdown.png) repeat-x;
}
.droparrow{
width:27px;
height:27px;
background:url(../images/droparrow.png) no-repeat;
float:right;
}
.droparrow:hover{
width:25px;
height:25px;
background:url(../images/droparrow.png) no-repeat;
float:right;
border:#F00 1px solid;
}
.dropmiandiv{
margin-left:40px;
width:214px;
border: 2px solid #aaaaaa;
background:url(../images/dropdown.png) repeat-x;
height: 26px;
}
.chooseItems{
border:#666 2px solid;
}
.chooseItems .chooseItem{
font-size: 13px;
font-family: "微軟雅黑";
padding: 5px;
}
.chooseItems .chooseItem:hover{
background:#09F;
}
</style>
</head>
<body>
<div class="dropmiandiv" quest ="select1">
<div id ="select1" displayMember="-1" valueMember ="請(qǐng)選擇" class="dropdiv">請(qǐng)選擇</div>
<div class="droparrow"></div>
</div>
<div class="chooseItems" answer ="select1" style="display:none; position:absolute;">
<div class="chooseItem" displayMember="0" valueMember ="獨(dú)立注冊(cè)譯員">獨(dú)立注冊(cè)譯員</div>
<div class="chooseItem" displayMember="1" valueMember ="供應(yīng)商譯員">供應(yīng)商譯員</div>
<div class="chooseItem" displayMember="2" valueMember ="供應(yīng)商">供應(yīng)商</div>
<div class="chooseItem" displayMember="3" valueMember ="代理商">代理商</div>
</div>
<div class="dropmiandiv" quest ="select2" style="position:absolute;top:200px;">
<div id ="select2" displayMember="-1" valueMember ="請(qǐng)選擇" class="dropdiv">請(qǐng)選擇</div>
<div class="droparrow"></div>
</div>
<div class="chooseItems" answer ="select2" style="display:none; position:absolute;">
<div class="chooseItem" displayMember="0" valueMember ="獨(dú)立注冊(cè)譯員">獨(dú)立注冊(cè)譯員</div>
<div class="chooseItem" displayMember="1" valueMember ="供應(yīng)商譯員">供應(yīng)商譯員</div>
<div class="chooseItem" displayMember="2" valueMember ="供應(yīng)商">供應(yīng)商</div>
<div class="chooseItem" displayMember="3" valueMember ="代理商">代理商</div>
</div>
</body>
</html>
<script type="text/javascript">
$(".droparrow").click(function(e){
var quest = $(this).parent();
var questwidth = parseInt(quest.width());
var questheight = quest.height();
var left = quest.offset().left;
var top = parseInt(quest.offset().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).hide();
}else{
$(selectsd).css({"left":left+"px","top":top+"px","width":questwidth+"px"}).show();
}
});
$(".dropdiv").click(function(e){
var quest = $(this).parent();
var questwidth = parseInt(quest.width());
var questheight = quest.height();
var left = quest.offset().left;
var top = parseInt(quest.offset().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).hide();
}else{
$(selectsd).css({"left":left+"px","top":top+"px","width":questwidth+"px"}).show();
}
});
$(".chooseItem").click(function(e){
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.html(valueMember);
parent.change();
}
$(this).parent().hide();
});
$(".dropdiv").change(function(e){
alert($(this).attr("valueMember"));
});
$(".dropmiandiv").mouseleave(function(e){
var quest = $(this).attr("quest");
$('.chooseItems[answer='+quest+']').hide();
});
$(".chooseItems").mouseenter(function(e){
$(this).show();
});
$(".chooseItems").mouseleave(function(e){
$(this).hide();
});
</script>
您可能感興趣的文章:
- JS簡(jiǎn)單設(shè)置下拉選擇框默認(rèn)值的方法
- js實(shí)現(xiàn)select選擇框效果及美化
- js表單處理中單選、多選、選擇框值的獲取及表單的序列化
- js下拉選擇框與輸入框聯(lián)動(dòng)實(shí)現(xiàn)添加選中值到輸入框的方法
- js實(shí)現(xiàn)仿阿里巴巴城市選擇框效果實(shí)例
- JS+CSS實(shí)現(xiàn)實(shí)用的單擊輸入框彈出選擇框的方法
- 自定義的一個(gè)簡(jiǎn)單時(shí)尚js下拉選擇框
- Js(JavaScript)中,彈出是或否的選擇框示例(confirm用法的實(shí)例分析)
- js實(shí)現(xiàn)一個(gè)省市區(qū)三級(jí)聯(lián)動(dòng)選擇框代碼分享
- js判斷選擇時(shí)間不能小于當(dāng)前時(shí)間的示例代碼
- JS日期和時(shí)間選擇控件升級(jí)版(自寫)
- JS時(shí)間選擇器 兼容IE6,7,8,9
- JS實(shí)現(xiàn)漂亮的時(shí)間選擇框效果
相關(guān)文章
javascript實(shí)現(xiàn)輸入框內(nèi)容提示及隱藏功能
這篇文章主要介紹了javascript實(shí)現(xiàn)輸入框內(nèi)容提示及隱藏功能,實(shí)現(xiàn)方法真的超簡(jiǎn)單,本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2021-09-09精彩的Bootstrap案例分享 重點(diǎn)在注釋!(選項(xiàng)卡、柵格布局)
這篇文章主要為大家分享了一個(gè)精彩的Bootstrap案例,涉及到了選項(xiàng)卡、柵格布局,關(guān)鍵重點(diǎn)在注釋,感興趣的小伙伴們可以參考一下2016-07-07moment.js輕松實(shí)現(xiàn)獲取當(dāng)前日期是當(dāng)年的第幾周
這篇文章主要介紹了moment.js輕松實(shí)現(xiàn)獲取當(dāng)前日期是當(dāng)年的第幾周,需要的朋友可以參考下2015-02-02js彈出層永遠(yuǎn)居中實(shí)現(xiàn)思路及代碼
彈出層永遠(yuǎn)居中的方法有很多,在本文為大家詳細(xì)介紹下使用js是如何輕松實(shí)現(xiàn)的,喜歡的朋友可以參考下2013-11-11JS中關(guān)于事件處理函數(shù)名后面是否帶括號(hào)的問題
JS中的事件處理(事件綁定)就是讓某種或某些事件觸發(fā)某些活動(dòng)。有兩種常見的形式,分別是DOM Level 0 和DOM Level 2。今天總結(jié)一個(gè)關(guān)于事件處理程序的小細(xì)節(jié)。感興趣的朋友一起學(xué)習(xí)吧2016-11-11