Copy codeThe Code is as follows:
<! 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 = "select" class = "dropdiv"> select </div>
<Div class = "droparrow"> </div>
</Div>
<Div class = "chooseItems" answer = "select1" style = "display: none; position: absolute;">
<Div class = "chooseItem" displayMember = "0" valueMember = "independent interpreter registration"> independent interpreter registration </div>
<Div class = "chooseItem" displayMember = "1" valueMember = "supplier interpreter"> supplier interpreter </div>
<Div class = "chooseItem" displayMember = "2" valueMember = "supplier"> supplier </div>
<Div class = "chooseItem" displayMember = "3" valueMember = "agent"> agent </div>
</Div>
<Div class = "dropmiandiv" quest = "select2" style = "position: absolute; top: 200px;">
<Div id = "select2" displayMember = "-1" valueMember = "select" class = "dropdiv"> select </div>
<Div class = "droparrow"> </div>
</Div>
<Div class = "chooseItems" answer = "select2" style = "display: none; position: absolute;">
<Div class = "chooseItem" displayMember = "0" valueMember = "independent interpreter registration"> independent interpreter registration </div>
<Div class = "chooseItem" displayMember = "1" valueMember = "supplier interpreter"> supplier interpreter </div>
<Div class = "chooseItem" displayMember = "2" valueMember = "supplier"> supplier </div>
<Div class = "chooseItem" displayMember = "3" valueMember = "agent"> agent </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 {
Detail (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 {
Detail (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>