select下拉框自动显示选项

document.onkeypress=function()
    {

          // ASCII码  回车：13 空格:32
          if (event.keyCode==32)
          {
            显示选项
          }
    }

通过id或name得到select对象，然后options.add(new Option(option的id,option的value))

少了点是select对象.option...

我的意思不是去动态的增加select的option而是有这样一个select<select>
<option>1</option>
<option>2</option>
<option>3</option>
<select>当我按下空格键后，select的选项自动显示出来，就象点击select那个箭头显示出来一样

增加和显示有差别吗？效果上是一样的。 $("#select").children("option").each(function(){

$(this).css("display","block");

});那你就在点击空格的时候遍历select下的option,然后全部显示出来,display=block

还是有区别的吧，增加是再select上增加option
而我要的现实是指select里所有的options都现实出来你用的Jq有做测试么，我这边没有，按照你的思路用js写了还是没有效果的<html>
<head>
  <script>
   function show()
        {
  var options = document.getElementById('sec').options;
          var i = options.length - 1;

          for (;i>=0;i--)
          {
            alert(options[i].style.display);
            options[i].style.display = 'block';
          }
        }
  </script>
</head>
<body onload='show()'>
<select id='sec'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
        </select>
</body>
</html>

我是jquery做的二级联动，没问题。

把jqeury下下来了，应了你的代码结果还是不行
12楼的效果仍然没出来

option里的值能出来，但是和我要的效果不一样这位兄弟看下12楼的效果图，我期望按下空格键后效果和点击那个箭头的效果是一样的，还又别的方案吗？

我改了一下你看看效果.<script>
var flag=1;
function b_onclick(selcon){
   if(flag==1){
     selcon.size=selcon.options.length;
flag=0;
   }else{
     selcon.size=1;
flag=1;
   }
}
document.onkeypress=function(){
   // ASCII码  回车：13 空格:32
   if (event.keyCode==32){
     var sel=document.getElementById("hidsel");
     if(sel){
     b_onclick2(sel);
     }
   }
}
function b_onclick2(selcon){
   if(flag==1){
     selcon.style.display="block";
flag=0;
   }else{
     selcon.style.display="none";
flag=1;
   }
}
</script>
<body>
  <select size="1" id="selcon" name="selcon">
      <option>1</option>
<option>2</option>
<option>3</option>
  </select><br/>
  <select id="hidsel" name="hidsel" multiple="multiple" size="3" style="display:none;">
      <option>1</option>
<option>2</option>
<option>3</option>
  </select>
</body>

再改了一下加了选中值的效果<script>
var flag=1;
function b_onclick(selcon){
   if(flag==1){
     selcon.size=selcon.options.length;
flag=0;
   }else{
     selcon.size=1;
flag=1;
   }
}
document.onkeypress=function(){
   // ASCII码  回车：13 空格:32
   if (event.keyCode==32){
      var sel=document.getElementById("selcon");
     var hidsel=document.getElementById("hidsel");
     if(sel){
     b_onclick2(sel,hidsel);
     }
   }
}
function b_onclick2(sel,hidsel){
   if(flag==1){
     hidsel.style.display="block";
     for(var i=0;i<hidsel.options.length;i++){
  if(hidsel.options[i].value==sel.options[sel.selectedIndex].value){
hidsel.options[i].selected=true;
break;
}
  }
flag=0;
   }else{
     hidsel.style.display="none";
flag=1;
   }
}
</script>
<body>
  <select size="1" id="selcon" name="selcon">
      <option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
  </select><br/>
  <select id="hidsel" name="hidsel" multiple="multiple" size="3" style="display:none;">
      <option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
  </select>
</body>

选中后option收不回去了，还有，select点击后应该是自动绑定了键盘上下键，option那里可以上下移动，背景变色。期望是空格按下后select的原功能还是一样的，兄弟你的代码已经非常接近了，看能不能再完善下非常感谢

关于那个上下箭头我这边一时找不到，只找到了小键盘的上下箭头的ascii码，你自己上网谷哥下吧。
<script>
var flag=1;
function b_onclick(selcon){
   if(flag==1){
     selcon.size=selcon.options.length;
flag=0;
   }else{
     selcon.size=1;
flag=1;
   }
}
document.onkeypress=function(){
   // ASCII码  回车：13 空格:32
   if (event.keyCode==32){
      var sel=document.getElementById("selcon");
     var hidsel=document.getElementById("hidsel");
     if(sel){
     b_onclick2(sel,hidsel);
     }
   }else if (event.keyCode==56){
     var hidsel=document.getElementById("hidsel");
      b_upOrDown(hidsel,true);
   }else if (event.keyCode==50){
      var hidsel=document.getElementById("hidsel");
      b_upOrDown(hidsel,false);
   }
}
function b_onclick2(sel,hidsel){
   if(flag==1){
     hidsel.style.display="block";
     for(var i=0;i<hidsel.options.length;i++){
  if(hidsel.options[i].value==sel.options[sel.selectedIndex].value){
hidsel.options[i].selected=true;
break;
}
  }
flag=0;
   }else{
     hidsel.style.display="none";
flag=1;
   }
}
function b_upOrDown(hidsel,flag){
if(hidsel.style.display!='none'){
var count=hidsel.options.length;
if(flag){ //up
var index1=(hidsel.selectedIndex>0)?(hidsel.selectedIndex-1):hidsel.selectedIndex;
onSelect(hidsel,index1);
}else{  //down
var index1=(hidsel.selectedIndex<count-1)?(hidsel.selectedIndex+1):(hidsel.selectedIndex);
onSelect(hidsel,index1);
}
}
}
function onSelect(hidsel,index1){
for(var i=0;i<hidsel.options.length;i++){
  if(i==index1){
hidsel.options[i].selected=true;
}else{
hidsel.options[i].selected=false;
}
  }
}
</script>
<body>
  <select size="1" id="selcon" name="selcon">
      <option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
  </select><br/>
  <select id="hidsel" name="hidsel" multiple="multiple" size="3" style="display:none;">
      <option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
  </select>
</body>

这样行不行？
<select name="" id="sel" onmouseover="this.multiple='multiple'" onmouseout="this.multiple=''">
<option value="" selected>111</option>
<option value="">2323</option>
</select>

调试易

select下拉框自动显示选项

解决方案 »