jquery模擬SELECT下拉框取值效果_jquery

jquery模擬SELECT框，效果圖如下：
 

複製程式碼程式碼

body{padding:0;margin:0;font-size:12px;}
ul,li{list-style:none;padding:0;margin:0;}
#dropdown{寬度: 186 像素；邊距：100px 自動；位置：相對}
.input_select{寬度：150px;高度：24px；行高：24px；左內邊距：4px；右內邊距： 30px；邊框：1px實心#a9c9e2；背景:#e8f5fe url(arrow.gif) 無重複rightright 4px;顏色：#807a62; }
#dropdown ul{寬度:184px;背景：#e8f5fe；頂部邊界： 2px；邊框：1px實心#a9c9e2；位置：絕對；顯示：無}
#dropdown ul li{height:24px;行高：24px；文字縮排：10px}
#dropdown ul li a{display :block;高度：24px；顏色：#807a62；文字裝飾：無}
#dropdown ul li a:hover{background:#c6dbfc;顏色：#369}
#result{margin-top:10px; text-align:center}



$(function(){
$(".input_select").click(function(){
var ul = $("#dropdown ul ");
if(ul.css( "顯示")=="無"){
ul.slideDown("快速");
}else{
ul.slideUp("快速")
}
}) ;
$("#dropdown ul li a").click(function(){
var txt = $(this).text();
$(".input_select").val(txt );
var value = $(this).attr("rel");
$("#dropdown ul").hide();您選擇了“txt”，值為：“值);
});

});
腳本>
頭>

/>

;

• 北京


• 上海


• 武漢


• 廣州

身體>