1. 程式人生 > >jQuery如何設定下拉框顯示與隱藏

jQuery如何設定下拉框顯示與隱藏

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

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

示例程式碼如下

  1. 1 2 3 4 5 6 7 8 9 10 11 <div class="box"
    > <span>點選按鈕可以顯示或隱藏下拉框:</span> <div class="content"> <select name="test"> <option value="0">請選擇一個專案</option> <option value="1">我不選</option> <option value="2">選就選吧</option> </select> </div> <input type="button" value="顯示"
    > </div>
  2. 設定css樣式

    1 2 3 4 5 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程式碼

    1 2 3 4 5 6 7 $(function(){ $("select"

    相關推薦

    jQuery如何設定顯示隱藏

    jQuery的 hide() 和 show() 方法分別用來隱藏和顯示 HTML 元素,而 toggle() 方法則可以切換 hide() 和 show() 方法,也就是顯示被隱藏的元素,並隱藏已顯示的元素。 1 2 3 $("select").hide

    jquery設定的值

    程式碼如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script s

    分頁顯示資料 -- jquery + bootstarp

    所以依賴的檔案 <link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/2.3.2/css/bootstrap.min.css"> <link rel="styleshe

    通過jquery動態設定select的選中值option

    雖然簡單,但是用得比較少,自己按照select的選中原理,直接擼出來,然後做出跟百度出來的結果對比了一下,發現百度出來的東西太繁瑣了,效果實現了,但是本著程式碼要簡潔的心,我還是用了自己的方法,記錄一下結構如下:<select>    <option cla

    jquery中用列表顯示預設的值

    1、在postUpdate.jsp中新增js如下: <script type="text/javascript"> $(document).ready(function(){

    select動態新增option動態設定預設選項(selected)的問題(原創)

    //動態生成下拉框$.ajax({    type:"GET",    async:false,     //設為同步請求(非同步載入的話後面的遍歷方法獲取不到option)    url:context+"/service/demo/hfjd/findJdmc",//獲取

    jquery select和 easy-ui combox 選定指定項區別

    strong value data har eas mit arp 下拉框 表單 jquey select <select id="gender" name="sex11" >//不能加easy-ui標記 <option value="

    jquery改動

    <select class="form-control" id="isAgent">                             &n

    設定中的選中項

    點選設定按鈕下拉框隨機選中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="

    Angularjs 關於Angularjs的ng-options設定的value的值

    <div ng-app="myApp" ng-controller="myCtrl"> <select ng-model="selectedName" ng-options="item.id as item.name for item in names"> //ite

    QComboBox設定的高度和文字大小,和本身的寬度和大小

    設定QComboBox的預設model為QAbstractItemDelegate,但不幸的的是QComboBox的Item並不繼承自QStyedItemDeletegate而是繼承自QItemDelegate。 如果要設定QComboBox的行高,使用Qss的方式 QComboBox QAbstract

    java操作poi生成excel.xlsx(設定)下載本地和前端下載

    需求:匯入excel表格,如果excel有錯誤,將錯誤的地方標紅,在把資料以excel的形式寫出,供使用者下載 解決方案:1.以實體類的方式接收excel並解析(建立兩個集合一個接收正常的資料一個接收錯誤的資料) 2.錯誤集合無論正確錯誤資料都要儲存,並記錄是否有誤(錯誤資料

    Vue2.x-02根據條件動態設定、時間選擇器、文字是否可編輯

    文章目錄 概述 選擇器禁止選擇 date-picker禁止選擇 input禁止輸入 概述 我們這裡元件庫使用的iview元件庫 需求是:特定環節,資料只能檢視,不能修改。 (檢視頁面和新增複用的同一個子元件)。 因此

    vue 設定三級聯動

    如圖中,用vue實現三個選擇框是聯動關係,首先選擇廠商,然後品牌下拉框中出現的品牌是所選廠商包含的品牌,同理,選擇完品牌後,車型也是所選品牌中包含的車型。 例如有這樣的對應關係: 廠商 品牌 車型 長城 哈弗 HB01 HB02 HB0

    JQuery 定時操作實現圖片顯示隱藏

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src=

    jQuery操作的text值和val值

    插入 索引 dex 技術 remove last lec .text for jQuery操作下拉框的text值和val值 1,JS源碼 <select name="select1" id="select1" style="width:300px;">  

    Axure學習筆記整理1-設定、列表和元件文字內容

    我一直認為Axure的使用是做產品經理必備的基礎技能之一,所以從一開始轉行做產品經理就在熟悉和試圖挖掘更多的Axure使用技巧。 本篇以及後面幾篇文章都希望較簡單的方式完成簡單的互動設計。事先說明一下,我不是專門做互動設計的,只是因為平時工作中個人覺得可以少量使用互動讓原型圖設計更為流暢。最近打

    jquery獲取的值

    最近一個專案需要做前端,撿起好久不用的js,下拉框是我們經常用到的控制元件,有以下幾種獲得選中項的值: $("#select_id").find("option:selected").text(); $("#select_id").val(); $("#select_id"

    設定選中的值

    設定下拉框選中值 1、("#province").find("option[value='130000']").attr("selected",true);/22、(“#province”).fin

    ABAP 設定

    AT SELECTION-SCREEN OUTPUT. REFRESH LIST1.   NAME1 = 'P_BSART'.   VALUE1-KEY = 'ZEB'.   VALUE1-TEXT = '配送轉儲採購訂單'.   APPEND VALUE1 TO LIST1.   VALUE1-KEY =