jQuery如何设置下拉框显示与隐藏

jQuery的 hide() 和 show() 方法分别用来隐藏和显示 HTML 元素,而 toggle() 方法则可以切换 hide() 和 show() 方法,也就是显示被隐藏的元素,并隐藏已显示的元素。

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

示例代码如下

  1. 创建Html元素

    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" ).hide();  // 默认隐藏下拉框
         $( ":button" ).click( function () {
             $( "select" ).toggle();   // 已经显示则隐藏,隐藏了则显示
             $( this ).val($( this ).val()== "显示" ? "隐藏" : "显示" );
         })
    })
  4. 观察效果

  • 初始状态,select默认是被隐藏的

    jQuery如何设置下拉框显示与隐藏_第1张图片

  • 点击显示按钮则出现select,同时按钮的说明文字变为“隐藏”

    jQuery如何设置下拉框显示与隐藏_第2张图片

  • 点击“隐藏”,select消失,回到初始状态

    jQuery如何设置下拉框显示与隐藏_第3张图片


本文源自:https://zhidao.baidu.com/question/184538523.html

你可能感兴趣的:(jQuery设置下拉框)