Jquery和CSS實(shí)現(xiàn)選擇框重置按鈕功能
更新時(shí)間：2018年11月08日 08:44:51 投稿：laozhang
在本篇文章中我們給大家?guī)?lái)了Jquery和CSS實(shí)現(xiàn)選擇框重置按鈕功能的相關(guān)代碼，需要的朋友們參考下。
很多時(shí)候我們都會(huì)用到一個(gè)下拉選擇，還有就是重置的功能，今天我們就給大家?guī)?lái)用Jquery配合CSS實(shí)現(xiàn)的這個(gè)功能。
代碼如下：
HTML
<select> <option value="">Select a color..</option> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> </select> <div class="displaySelect"> <span class="value"></span> <span class="close">⊗</span> </div>
CSS
.displaySelect{
display:none;
border: 1px solid;
}
select, .displaySelect {
text-indent:20px;
font-family:helvetica;
}
select, .displaySelect{
font-size:22px;
height:50px;
line-height:50px;
width:100%;
text-transform:capitalize;
}
.displaySelect .close{
display:block;
float:right;
width:10%;
text-align:center;
font-size:52px;
cursor:pointer;
}
Jquery
var select = $('select');
var selectResults = $('.displaySelect');
var selectValue = $('.value', selectResults);
var selectClose = $('.close', selectResults);
select.on('change', function() {
$(this).add(selectResults).toggle();
selectValue.html(this.value);
});
selectClose.click(function(){
select.val('').fadeIn();
selectResults.toggle();
selectValue.html('');
});
效果如下：
以上就是本次的效果圖片，感謝大家對(duì)腳本之家的支持。
相關(guān)文章
下面小編就為大家?guī)?lái)一篇深入理解JQuery中的事件與動(dòng)畫(huà)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧2016-05-05
本文主要介紹了JQuery的基本知識(shí)，如：jquery內(nèi)置函數(shù)，JQuery對(duì)象，Dom對(duì)象，jquery選擇器，jquery的迭代，jquery的節(jié)點(diǎn)遍歷等等，有助于對(duì)JQuery基本知識(shí)的學(xué)習(xí)與鞏固。需要的朋友可以參考下2016-12-12
jQuery滾動(dòng)條插件nanoscroller使用指南
本文給大家介紹的nanoScrollerJS是一款使用簡(jiǎn)單方式實(shí)現(xiàn) Mac OS X Lion 系統(tǒng)滾動(dòng)條效果的jQuery插件。該滾動(dòng)條插件利用原生的滾動(dòng)條可以工作在 iPad、iPhone 和一些 Android Tablets上。2015-04-04
這篇文章主要為大家詳細(xì)介紹了jquery點(diǎn)擊展示與隱藏更多內(nèi)容的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
Jquery通過(guò)Ajax訪問(wèn)XML數(shù)據(jù)的小例子
這篇文章主要介紹了Jquery通過(guò)Ajax訪問(wèn)XML數(shù)據(jù)，有需要的朋友可以參考一下2013-11-11
利用javascript/jquery對(duì)上傳文件格式過(guò)濾的方法
jquery中對(duì)上傳文件格式過(guò)濾的方法,需要的朋友參考下。2009-07-07
SimpleModal是一個(gè)輕量級(jí)的jQuery插件，它提供了一個(gè)模式對(duì)話框發(fā)展強(qiáng)大的接口。這篇文章主要介紹了jQuery simpleModal插件的使用，非常不錯(cuò)，具有參考借鑒價(jià)值，對(duì)jquery simplemodal相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-08-08
jQuery實(shí)現(xiàn)統(tǒng)計(jì)輸入文字個(gè)數(shù)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)統(tǒng)計(jì)輸入文字個(gè)數(shù)的方法,涉及jQuery操作鼠標(biāo)事件及dom元素的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了jquery實(shí)現(xiàn)全屏滾動(dòng)，針對(duì)全屏滾動(dòng)知識(shí)進(jìn)行詳細(xì)闡述，感興趣的小伙伴們可以參考一下2015-12-12
jquery刪除數(shù)據(jù)記錄時(shí)的彈出提示效果
這篇文章主要介紹了jquery實(shí)現(xiàn)的刪除數(shù)據(jù)記錄時(shí)的彈出提示效果,需要的朋友可以參考下2014-05-05