js开发下拉组件,如何确保界面在下拉框下面

JavaScript06

js开发下拉组件,如何确保界面在下拉框下面,第1张

在JS开发中,如果要确保界面在下拉组件下面,可以使用以下几种方法:

1.使用CSS中的z-index属性,将下拉组件的z-index值设置为较低值,而界面元素的z-index值设置为较高值。这样就能确保界面元素覆盖在下拉组件上。

2.使用JavaScript代码控制下拉组件的显示和隐藏,在下拉框显示时,将界面元素的可见性设置为不可见,在下拉框隐藏时,将界面元素的可见性设置为可见。

var keyHandler=function(event){

    var e = event || window.event || arguments.callee.caller.arguments[0]

    var hoverCSS={

      color: '#FFF',

      'background-color': '#6E9DE4'

    }

    var backCSS={

      color:'#000',

      'background-color':'#fff'

    }

    if(e &&e.keyCode==37){ // 按 左

      cu_pos--

$("#hh_"+dest).find('li').eq(cu_pos+1).find('a').css(backCSS)

       if(cu_pos<0){

        cu_pos=$("#hh_"+dest).find('li').length-1

      }

      $("#hh_"+dest).animate({scrollTop:cu_pos*25},100)

       $("#hh_"+dest).find('li').eq(cu_pos).find('a').css(hoverCSS)

    }

    if(e &&e.keyCode==38){ // 按 上

      //要做的事情

               

      cu_pos--

    //  console.log("Pressed 上"+cu_pos)

               

      $("#hh_"+dest).find('li').eq(cu_pos+1).find('a').css(backCSS)

       if(cu_pos<0){

        cu_pos=$("#hh_"+dest).find('li').length-1

      }

       $("#hh_"+dest).animate({scrollTop:cu_pos*25},100)

       $("#hh_"+dest).find('li').eq(cu_pos).find('a').css(hoverCSS)

              

    }

    if(e &&e.keyCode==39){ // enter 右

      cu_pos++

         // if(cu_pos>=0){

          $("#hh_"+dest).find('li').eq(cu_pos-1).find('a').css(backCSS)

          //$("#hh_"+dest).css("marginTop","-=12px")

                 

        //  }

          if(cu_pos>=$("#hh_"+dest).find('li').length){

            cu_pos=0

          }

           $("#hh_"+dest).animate({scrollTop:cu_pos*25},100)

                   

        $("#hh_"+dest).find('li').eq(cu_pos).find('a').css(hoverCSS)

                 

    }

    if(e &&e.keyCode==40){ // enter 下

           cu_pos++

    //  console.log("Pressed 下"+cu_pos)

       // console.log(cu_pos)

   //   console.log($("#hh_"+dest).find('li').length)

                 

         // if(cu_pos>0){

          $("#hh_"+dest).find('li').eq(cu_pos-1).find('a').css(backCSS)

        //  $("#hh_"+dest).css("marginTop","+=12px")

                

       //   }

      if(cu_pos>=$("#hh_"+dest).find('li').length){

            cu_pos=0

          }

           $("#hh_"+dest).animate({scrollTop:cu_pos*25},100)

        $("#hh_"+dest).find('li').eq(cu_pos).find('a').css(hoverCSS)

                 

             

    }

    if(e &&e.keyCode==13){ // enter Enter

   // console.log("Pressed Enter")

   // console.log($("#hh_"+dest).find('li').eq(cu_pos).find('a').html())

    gets_id('class_'+dest).value=$("#hh_"+dest).find('li').eq(cu_pos).find('a').html()

    $("#hh_"+dest).find('li').eq(cu_pos).find('a').css(backCSS)

    gets_id('hh_'+dest).style.display='none'

     document.removeEventListener("mousedown", handler, false)

           document.removeEventListener("keydown", keyHandler, false)

    }

}

<select name="r_house" id="r_house">

<option value="选项1">选项1</option>

<option value="选项2" selected>选项2</option><!--如果想直接在html中选定某项,给该项加个selected属性即可,不需要编程-->

<option value="选项3">选项3</option>

<option value="选项4">选项4</option>

<option value="选项5">选项5</option>

<option value="选项6">选项6</option>

</select>

<script>

window.onload=function(){

 //如果一定要js代码实现,可以这样:

 //方法一(假定选定第3项,下同):

 r_house.value="选项3"

 //方法二:

 r_house.options[2].selected=true

 //方法三:

 r_house.children[2].selected=true

 //方法四:

 r_house.getElementsByTagName("option")[2].selected=true

 //方法五:

 r_house.querySelectorAll("option")[2].selected=true

 //还有N多种方法此略

}

</script>