Jquery和CSS實現(xiàn)選擇框重置按鈕功能
更新時間：2018年11月08日 08:44:51 投稿：laozhang
在本篇文章中我們給大家?guī)砹薐query和CSS實現(xiàn)選擇框重置按鈕功能的相關(guān)代碼，需要的朋友們參考下。
很多時候我們都會用到一個下拉選擇，還有就是重置的功能，今天我們就給大家?guī)碛肑query配合CSS實現(xiàn)的這個功能。
代碼如下：
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('');
});
效果如下：
以上就是本次的效果圖片，感謝大家對腳本之家的支持。
相關(guān)文章
下面小編就為大家?guī)硪黄钊肜斫釰Query中的事件與動畫。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-05-05
本文主要介紹了JQuery的基本知識，如：jquery內(nèi)置函數(shù)，JQuery對象，Dom對象，jquery選擇器，jquery的迭代，jquery的節(jié)點遍歷等等，有助于對JQuery基本知識的學(xué)習(xí)與鞏固。需要的朋友可以參考下2016-12-12
本文給大家介紹的nanoScrollerJS是一款使用簡單方式實現(xiàn) Mac OS X Lion 系統(tǒng)滾動條效果的jQuery插件。該滾動條插件利用原生的滾動條可以工作在 iPad、iPhone 和一些 Android Tablets上。2015-04-04
這篇文章主要為大家詳細(xì)介紹了jquery點擊展示與隱藏更多內(nèi)容的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
Jquery通過Ajax訪問XML數(shù)據(jù)的小例子
這篇文章主要介紹了Jquery通過Ajax訪問XML數(shù)據(jù)，有需要的朋友可以參考一下2013-11-11
利用javascript/jquery對上傳文件格式過濾的方法
jquery中對上傳文件格式過濾的方法,需要的朋友參考下。2009-07-07
SimpleModal是一個輕量級的jQuery插件，它提供了一個模式對話框發(fā)展強(qiáng)大的接口。這篇文章主要介紹了jQuery simpleModal插件的使用，非常不錯，具有參考借鑒價值，對jquery simplemodal相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-08-08
jQuery實現(xiàn)統(tǒng)計輸入文字個數(shù)的方法
這篇文章主要介紹了jQuery實現(xiàn)統(tǒng)計輸入文字個數(shù)的方法,涉及jQuery操作鼠標(biāo)事件及dom元素的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了jquery實現(xiàn)全屏滾動，針對全屏滾動知識進(jìn)行詳細(xì)闡述，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要介紹了jquery實現(xiàn)的刪除數(shù)據(jù)記錄時的彈出提示效果,需要的朋友可以參考下2014-05-05