jquery模擬SELECT下拉框取值效果

更新時(shí)間：2013年10月23日 17:59:28 作者：

說(shuō)到模擬SELECT框，想必大家第一想到的就是使用javascript吧，其實(shí)是jquery也是可以做到的，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下

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

 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>jquery模擬SELECT框</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("您選擇了"+txt+"，值為："+value); 
}); 

}); 
</script> 
</head> 
<body> 

<div id="dropdown"> 
<input class="input_select" type="text" value="請(qǐng)選擇城市"/> 
<ul> 
<li><a href="#" rel="2">北京</a></li> 
<li><a href="#" rel="3">上海</a></li> 
<li><a href="#" rel="4">武漢</a></li> 
<li><a href="#" rel="5">廣州</a></li> 
</ul> 
</div> 
<div id="result"></div> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

jQuery中trigger()與bind()用法分析
這篇文章主要介紹了jQuery中trigger()與bind()用法,結(jié)合實(shí)例形式分析了trigger()與bind()的功能、定義及具體使用技巧,需要的朋友可以參考下
2015-12-12
jQuery Validate表單驗(yàn)證深入學(xué)習(xí)
這篇文章主要介紹了jQuery Validate表單驗(yàn)證入門(mén)知識(shí)，該插件捆綁了一套有用的驗(yàn)證方法，包括 URL 和電子郵件驗(yàn)證，同時(shí)提供了一個(gè)用來(lái)編寫(xiě)用戶自定義方法的 API，感興趣的小伙伴們可以參考一下
2015-12-12
jQueryMobile之窗體長(zhǎng)內(nèi)容的缺陷與解決方法實(shí)例分析
這篇文章主要介紹了jQueryMobile之窗體長(zhǎng)內(nèi)容的缺陷與解決方法,結(jié)合具體實(shí)例形式分析了jQueryMobile底部懸浮層遮擋情況下的解決方法,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2017-09-09
jQuery ajax MD5實(shí)現(xiàn)用戶注冊(cè)即時(shí)驗(yàn)證功能
這篇文章主要為大家詳細(xì)介紹了JQuery AJAX MD5實(shí)現(xiàn)用戶注冊(cè)即時(shí)驗(yàn)證功能,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
QRCode.js：基于JQuery的生成二維碼JS庫(kù)的使用
本篇文章主要介紹了QRCode.js：基于JQuery的生成二維碼JS庫(kù)的使用，具有一定的參考價(jià)值，有興趣的同學(xué)可以了解一下
2017-06-06
利用jQuery實(shí)現(xiàn)一個(gè)簡(jiǎn)單的表格上下翻頁(yè)效果
這篇文章主要給大家介紹了利用jQuery實(shí)現(xiàn)一個(gè)簡(jiǎn)單的表格上下翻頁(yè)效果的相關(guān)資料，文中介紹的很詳細(xì)，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
2017-03-03
jQuery實(shí)現(xiàn)簡(jiǎn)單的列表式導(dǎo)航菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單的列表式導(dǎo)航菜單效果代碼,涉及jquery操作鼠標(biāo)事件及頁(yè)面元素樣式動(dòng)態(tài)變換的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
鋒利的jQuery 要點(diǎn)歸納（二） jQuery中的DOM操作（下）
鋒利的jQuery 要點(diǎn)歸納（二） jQuery中的DOM操作（下）
2010-03-03
跨域請(qǐng)求之jQuery的ajax jsonp的使用解惑
前天在項(xiàng)目中寫(xiě)的一個(gè)ajax jsonp的使用，出現(xiàn)了問(wèn)題：可以成功獲得請(qǐng)求結(jié)果，但沒(méi)有執(zhí)行success方法
2011-10-10
jQuery對(duì)html元素取值與賦值的方法
這篇文章主要介紹了jQuery對(duì)html元素取值與賦值的方法，有需要的朋友可以參考一下
2013-11-11