jQuery設(shè)置下拉框顯示與隱藏效果的方法分析

更新時(shí)間：2019年09月15日 11:57:21 作者：寫給初學(xué)者的幾封信

這篇文章主要介紹了jQuery設(shè)置下拉框顯示與隱藏效果的方法,結(jié)合實(shí)例形式分析了jQuery針對(duì)頁(yè)面元素的事件響應(yīng)與屬性動(dòng)態(tài)操作相關(guān)使用技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery設(shè)置下拉框顯示與隱藏效果的方法。分享給大家供大家參考，具體如下：

jQuery的 hide() 和 show() 方法分別用來隱藏和顯示 HTML 元素，而 toggle() 方法則可以切換 hide() 和 show() 方法，也就是顯示被隱藏的元素，并隱藏已顯示的元素。

$("select").hide();   // 隱藏下拉框
$("select").show();   // 顯示下拉框
$("select").toggle();  // 如果下拉框是顯示的則隱藏之，反之亦然

示例代碼如下

1. 創(chuàng)建Html元素

<div class="box">
  <span>點(diǎn)擊按鈕可以顯示或隱藏下拉框：</span>
  <div class="content">
    <select name="test">
      <option value="0">請(qǐng)選擇一個(gè)項(xiàng)目</option>
      <option value="1">我不選</option>
      <option value="2">選就選吧</option>
    </select>
  </div>
  <input type="button" value="顯示">
</div>

2. 設(shè)置css樣式

div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}
div.box span{color:#999;font-style:italic;}
div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
select{width:150px;height:30px;border:1px solid #6699FF;}
input[type='button']{height:30px;margin:10px;padding:5px 10px;}

3. 編寫jquery代碼

$(function(){
  $("select").hide(); // 默認(rèn)隱藏下拉框
  $(":button").click(function() {
    $("select").toggle(); // 已經(jīng)顯示則隱藏，隱藏了則顯示
    $(this).val($(this).val()=="顯示"?"隱藏":"顯示");
  })
})

4. 觀察效果

初始狀態(tài)，select默認(rèn)是被隱藏的

點(diǎn)擊顯示按鈕則出現(xiàn)select，同時(shí)按鈕的說明文字變?yōu)椤半[藏”

點(diǎn)擊“隱藏”，select消失，回到初始狀態(tài)

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)邊框動(dòng)態(tài)效果的實(shí)例代碼
這篇文章給大家分享了一個(gè)jQuery邊框動(dòng)態(tài)的效果，當(dāng)鼠標(biāo)移動(dòng)到邊框區(qū)域的時(shí)候，邊框會(huì)有個(gè)動(dòng)態(tài)的加載動(dòng)畫效果，實(shí)現(xiàn)的效果真的非常不錯(cuò)，下面來一起看看吧。
2016-09-09
Jquery使用each函數(shù)實(shí)現(xiàn)遍歷及數(shù)組處理
這篇文章主要介紹了Jquery使用each函數(shù)實(shí)現(xiàn)遍歷及數(shù)組處理,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-07-07
通過jquery的$.getJSON做一個(gè)跨域ajax請(qǐng)求試驗(yàn)
jquery提供了$.getJSON的方法，讓我們可以實(shí)現(xiàn)跨域ajax請(qǐng)求，但jqueryAPI上的內(nèi)容實(shí)在太少，如何用$.getJSON，請(qǐng)求網(wǎng)站應(yīng)該返回怎樣的數(shù)據(jù)庫(kù)才能讓$.getJSON獲取到，下面我就用一個(gè)實(shí)際例子來說明下。
2011-05-05
Iframe實(shí)現(xiàn)跨瀏覽器自適應(yīng)高度解決方法
這篇文章主要介紹了Iframe實(shí)現(xiàn)跨瀏覽器自適應(yīng)高度解決方法,通過父層容器的應(yīng)用來實(shí)現(xiàn)這一功能,非常實(shí)用的一個(gè)技巧,需要的朋友可以參考下
2014-09-09
jQuery Validate讓普通按鈕觸發(fā)表單驗(yàn)證的方法
一般的表單校驗(yàn)都是直接注冊(cè)在頁(yè)面上的匿名函數(shù)，導(dǎo)致只能通過固定的提交方式觸發(fā)表單校驗(yàn)，如果想自定義一個(gè)按鈕觸發(fā)表單校驗(yàn)如何實(shí)現(xiàn)呢，下面通過本文給大家詳細(xì)介紹
2016-12-12
jquery 無限級(jí)下拉菜單的簡(jiǎn)單實(shí)現(xiàn)代碼
本篇文章主要是對(duì)jquery 無限級(jí)下拉菜單的簡(jiǎn)單實(shí)現(xiàn)代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-02-02
jQuery EasyUI API 中文文檔 - TimeSpinner時(shí)間微調(diào)器
jQuery EasyUI API 中文文檔 - TimeSpinner時(shí)間微調(diào)器介紹，需要的朋友可以參考下。
2011-10-10
jQuery遍歷節(jié)點(diǎn)樹方法分析
這篇文章主要介紹了jQuery遍歷節(jié)點(diǎn)樹方法,結(jié)合實(shí)例形式分析了3種常見的節(jié)點(diǎn)遍歷技巧,需要的朋友可以參考下
2016-09-09
JQuery Tips(4) 一些關(guān)于提高JQuery性能的Tips
如今咱祖國(guó)已經(jīng)崛起了..電腦的配置也是直線上升.可是js的性能問題依然不可小覷..尤其在萬(wàn)惡的IE中..js引擎速度本來就慢..如果JS如果再寫不好，客戶端多開幾個(gè)窗口假死肯定是家常便飯了.廢話不說了，下面說說js性能提升的一些小Tips.
2009-12-12
jQuery 實(shí)現(xiàn)側(cè)邊浮動(dòng)導(dǎo)航菜單效果
這篇文章主要介紹了jQuery 實(shí)現(xiàn)側(cè)邊浮動(dòng)導(dǎo)航菜單效果,需要的朋友可以參考下
2014-12-12