使用CSS和jQuery模擬select并附提交后取得數(shù)據(jù)的代碼
更新時(shí)間：2013年10月18日 17:08:38 作者：
使用CSS和jQuery模擬select并實(shí)現(xiàn)提交后取得數(shù)據(jù)，詳細(xì)實(shí)現(xiàn)及截圖如下，感興趣的朋友可以參考下
模擬select 并帶有提交后取得數(shù)據(jù)的代碼
HTML Code
<div id="dropdown">
<p>請(qǐng)選擇城市</p>
<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>
JavaScript Code
<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("您選擇了"+txt+"，值為："+value);
});
});
</script>
CSS Code
#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}
HTML Code
復(fù)制代碼 代碼如下:
<div id="dropdown">
<p>請(qǐng)選擇城市</p>
<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>
JavaScript Code
復(fù)制代碼 代碼如下:
<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("您選擇了"+txt+"，值為："+value);
});
});
</script>
CSS Code
復(fù)制代碼 代碼如下:
#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}
相關(guān)文章
jquery實(shí)現(xiàn)圖片輪播和滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)圖片輪播和滑動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
JQuery判斷正整數(shù)整理小結(jié)(jQuery 文本框中只能輸入正整數(shù))
這篇文章主要介紹了JQuery判斷正整數(shù)，附上詳細(xì)的代碼供大家查看具體的方法,需要的朋友可以參考下2017-08-08
這篇文章主要介紹了jquery操作復(fù)選框checkbox的方法,實(shí)例匯總了jQuery針對(duì)checkbox進(jìn)行判斷與賦值的各種常用操作技巧,需要的朋友可以參考下2015-02-02
JQuery文本改變觸發(fā)事件如聚焦事件、失焦事件等，下面有個(gè)示例，感興趣的朋友可以參考下2014-01-01
一個(gè)關(guān)于jqGrid使用的小例子(行按鈕)
一個(gè)關(guān)于jqGrid使用的小例子(行按鈕) ，使用jqGrid的朋友可以參考下。2011-11-11
jquery實(shí)現(xiàn)點(diǎn)擊彈出帶標(biāo)題欄的彈出層(從右上角飛入)效果
這篇文章主要介紹了jquery實(shí)現(xiàn)點(diǎn)擊彈出帶標(biāo)題欄的彈出層(從右上角飛入)效果,涉及jQuery響應(yīng)鼠標(biāo)事件操作頁(yè)面元素動(dòng)畫(huà)效果的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-09-09
JQuery中html()方法使用不當(dāng)帶來(lái)的陷阱
html方法當(dāng)不傳參數(shù)時(shí)用來(lái)獲取元素的html內(nèi)容2011-04-04
對(duì)元素進(jìn)行拖動(dòng)排序的實(shí)現(xiàn)方法有很多，在本文為大家介紹下使用jquery來(lái)完成這個(gè)工作，希望對(duì)大家有所幫助2014-01-01
本文主要分享了jQuery實(shí)現(xiàn)文檔樹(shù)效果的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
jquery插件開(kāi)發(fā)注意事項(xiàng)小結(jié)
Jquery是繼prototype之后又一個(gè)優(yōu)秀的Javascrīpt框架。它是輕量級(jí)的js庫(kù)(壓縮后只有21k) ，它兼容CSS3，還兼容各種瀏覽器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)2013-06-06