使用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í)用密碼強(qiáng)度檢測(cè)
本篇文章主要介紹了jQuery實(shí)用密碼強(qiáng)度檢測(cè)，這是一個(gè)非常常見(jiàn)的功能，可以驗(yàn)證密碼的強(qiáng)度，本文使用jQuery來(lái)實(shí)現(xiàn)，有需要的小伙伴可以參考下。2017-03-03
jquery UI Datepicker時(shí)間控件的使用方法（基礎(chǔ)版）
這篇文章主要介紹了jquery ui datepicker時(shí)間控件的使用方法，需要的朋友可以參考下2015-11-11
這篇文章主要介紹了jquery如何自定義表格樣式，分別實(shí)現(xiàn)三種樣式：默認(rèn)狀態(tài)（灰白相間），鼠標(biāo)懸浮狀態(tài)（綠色），鼠標(biāo)點(diǎn)擊狀態(tài)（黃色），感興趣的小伙伴們可以參考一下2015-11-11
實(shí)現(xiàn)placeholder效果的方案匯總
由于placeholder是html5的新屬性，可想而知，僅支持html5的瀏覽器才支持placeholder，目前最新的firefox、chrome、safari以及ie10都支持，ie6到ie9都不支持。2015-06-06
本篇文章主要是對(duì)jquery彈出層居中效果的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-03-03
jquery.cookie實(shí)現(xiàn)的客戶端購(gòu)物車操作實(shí)例
這篇文章主要介紹了jquery.cookie實(shí)現(xiàn)的客戶端購(gòu)物車操作,結(jié)合實(shí)例形式分析了jQuery基于cookie存儲(chǔ)及操作數(shù)據(jù)實(shí)現(xiàn)購(gòu)物車功能的技巧,需要的朋友可以參考下2015-12-12
jQuery中用on綁定事件時(shí)需注意的事項(xiàng)
本篇文章主要介紹了jQuery中用on綁定事件時(shí)需注意的事項(xiàng)，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
本篇文章主要介紹了jquery仿蘋果的時(shí)間/日期選擇效果的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
1.2.0版本插件在1.0.0插件基礎(chǔ)上進(jìn)一步修改，版權(quán)信息僅保留致謝信息，刪除作者為了代碼整體提示美觀度，故將jQuery官方兩位數(shù)版本變更為三位數(shù)版本2011-07-07
jquery自動(dòng)切換tabs選項(xiàng)卡的具體實(shí)現(xiàn)
這篇文章主要介紹了jquery自動(dòng)切換tabs選項(xiàng)卡的具體實(shí)現(xiàn)，有需要的朋友可以參考一下2013-12-12