Use CSS and jquery to simulate a select and attach the code that gets the data after submitting _jquery

Simulate a select with code to obtain data after submission

HTML Code

Copy Code code as follows:

<div id= "Dropdown" >
<p> Please select City </p>
<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>

JavaScript Code

Copy Code code as follows:

<script type= "Text/javascript" >
$ (function () {
$ ("#dropdown p"). 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 ();
$ ("#dropdown p"). html (TXT);
var value = $ (this). attr ("rel");
$ ("#dropdown ul"). Hide ();
$ ("#result"). HTML ("You have selected" +txt+ ", the value is:" +value);
});

});
</script>

CSS Code

Copy Code code as follows:

#dropdown {width:186px; margin:100px auto; position:relative}
# dropdown p{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; Cursor:pointer}
#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}