<! DOCTYPE html>
<title>jquery Simulation Select box </title>
<meta charset= "Utf-8" >
<style>
body{padding:0;margin:0;font-size:12px;}
ul,li{list-style:none;padding:0;margin:0;}
#dropdown {width:186px; margin:100px auto; Position:relative}
input_select{width:150px; height:24px; line-height:24px; padding-left:4px; padding-right:30px; border:1px Solid A9c9e2; Background: #e8f5fe URL (arrow.gif) no-repeat rightright 4px; Color: #807a62; }
#dropdown ul{width:184px; background: #e8f5fe; margin-top:2px; border:1px solid #a9c9e2; position:absolute; display: None
#dropdown ul li{height:24px; line-height:24px text-indent:10px}
#dropdown ul li A{display:block; height:24px color: #807a62; Text-decoration:none}
#dropdown ul Li a:hover{background: #c6dbfc; color: #369}
#result {Margin-top:10px;text-align:center}
</style>
<script type= "Text/javascript" src= "Http://jt.875.cn/js/jquery.js" ></script>
<script type= "Text/javascript" >
$ (function () {
$ (". Input_select"). Click (function () {
var ul = $ ("#dropdown ul");
if (Ul.css ("display") = = "None") {
Ul.slidedown ("fast");
}else{
Ul.slideup ("fast");
}
});
$ ("#dropdown ul li a"). Click (function () {
var txt = $ (this). text ();
$ (". Input_select"). Val (TXT);
var value = $ (this). attr ("rel");
$ ("#dropdown ul"). Hide ();
$ ("#result"). HTML ("You have selected" +txt+ ", the value is:" +value);
});
});
</script>
<body>
<div id= "Dropdown" >
<input class= "Input_select" type= "text" value= "Please choose City"/>
<ul>
<li><a href= "#" rel= "2" > Beijing </a></li>
<li><a href= "#" rel= "3" > Shanghai </a></li>
<li><a href= "#" rel= "4" > Wuhan </a></li>
<li><a href= "#" rel= "5" > Guangzhou </a></li>
</ul>
</div>
<div id= "Result" ></div>
</body>
