Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<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: "Microsoft Ya Hei";
position:relative;
padding:5px;
}
. drpdown{
width:214px;
height:24px;
font-size:13px;
font-family: "Microsoft Ya Hei";
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: "Microsoft Ya Hei";
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: "Microsoft Ya Hei";
padding:5px;
}
. Chooseitems. chooseitem:hover{
Background: #09F;
}
</style>
<body>
<div class= "Dropmiandiv" quest = "Select1" >
<div id = "Select1" displaymember= "-1" valuemember = "Please select" class= "Dropdiv" > Please select </div>
<div class= "Droparrow" ></div>
</div>
<div class= "chooseitems" answer = "Select1" style=; Position:absolute; " >
<div class= "Chooseitem" displaymember= "0" ValueMember = "Independent registered translator" > Independent registered Translator </div>
<div class= "Chooseitem" displaymember= "1" valuemember = "Supplier Interpreter" > Supplier interpreter </div>
<div class= "Chooseitem" displaymember= "2" ValueMember = "Suppliers" > Suppliers </div>
<div class= "Chooseitem" displaymember= "3" ValueMember = "agents" > Agents </div>
</div>
<div class= "Dropmiandiv" quest = "Select2" style= "position:absolute;top:200px"; >
<div id = "Select2" displaymember= "-1" valuemember = "Please select" class= "Dropdiv" > Please select </div>
<div class= "Droparrow" ></div>
</div>
<div class= "chooseitems" answer = "select2" style=; Position:absolute; " >
<div class= "Chooseitem" displaymember= "0" ValueMember = "Independent registered translator" > Independent registered Translator </div>
<div class= "Chooseitem" displaymember= "1" valuemember = "Supplier Interpreter" > Supplier interpreter </div>
<div class= "Chooseitem" displaymember= "2" ValueMember = "Suppliers" > Suppliers </div>
<div class= "Chooseitem" displaymember= "3" ValueMember = "agents" > Agents </div>
</div>
</body>
<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>