Essays-4 Articles-0 comments-0?
<style type= "Text/css" >
Body, UL, Li
{
margin:0;
padding:0;
font-size:13px;
}
UL, Li
{
List-style:none;
}
#divselect
{
width:186px;
margin:80px Auto;
position:relative;
z-index:10000;
}
#divselect cite
{
width:150px;
height:24px;
line-height:24px;
Display:block;
Color: #807a62;
Cursor:pointer;
Font-style:normal;
padding-left:4px;
padding-right:30px;
BORDER:3PX solid #333333;
Background:url (xjt.png) No-repeat right center;
}
#divselect ul
{
width:184px;
border:1px solid #333333;
Background-color: #ffffff;
Position:absolute;
z-index:20000;
Margin-top: -1px;
Display:none;
}
#divselect ul Li
{
height:24px;
line-height:24px;
}
#divselect ul Li a
{
Display:block;
height:24px;
Color: #333333;
Text-decoration:none;
padding-left:10px;
padding-right:10px;
}
#divselect ul Li A:hover
{
Background-color: #CCC;
}
P
{
margin:10px Auto;
width:920px;
}
#n
{
margin:10px Auto;
width:920px;
border:1px solid #CCC;
font-size:12px;
line-height:30px;
}
#n A
{
Padding:0 4px;
Color: #333;
}
</style>
<form id= "Form1" action= "" method= "POST" >
<div id= "Divselect" class= "Divselect" >
<cite> Please select special effects category </cite>
<ul>
<li><a href= "javascript:;" selectid= "1" > Navigation menu </a></li>
<li><a href= "javascript:;" selectid= "2" > drop-down Select effect </a></li>
<li><a href= "javascript:;" selectid= "3" >select simulation </a></li>
<li><a href= "javascript:;" selectid= "4" >DIVCSS5 effects </a></li>
<li><a href= "javascript:;" selectid= "5" >jquery drop-down effects </a></li>
</ul>
</div>
<br/>
<div id= "Divselect" class= "Divselect1" >
<cite> Please select special effects category </cite>
<ul>
<li><a href= "javascript:;" selectid= "6" > Navigation </a></li>
<li><a href= "javascript:;" selectid= "7" > drop-down </a></li>
<li><a href= "javascript:;" selectid= "8" > Analog </a></li>
<li><a href= "javascript:;" selectid= "9" > Effects </a></li>
<li><a href= "javascript:;" selectid= "> drop-down effects </a></li>
</ul>
</div>
<input name= "" value= "" id= "Inputselect"/>//Acquired data
</form>
<input type= "button" value= "Get" onclick= "get ()"/>
$ (function () {
$.divselect (". Divselect", "#inputselect");
$.divselect (". Divselect1", "#inputselect");
}); Two drop-down boxes defined
function Get () {
var dd = document.getElementById ("Inputselect");
alert (Dd.value);
}//eject the obtained data
Download Sample Code http://www.51xuediannao.com/js/jquery/divselect.html
div Simulation drop-down box effect