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>