JAVASCRIPT控制下拉列表的全部显示

L@_@K <body>
  <select name="drp1" onfocus="fncDispList(this);">
    <option value=""></option>
    <option value="1">BEIJING</option>
    <option value="2">SHANGHAI</option>
    <option value="3">CHONGQING</option>
    <option value="4">TIANJIN</option>
</select>
<script type="text/javascript">
<!--
function fncDispList(oSelect)
{
    oSelect.size = oSelect.options.length;
}
//-->
</script>
 </body>

解决方案 »

  1.   

    这个方法可以实现，不过不建议用
    <select name="drp1" onfocus="fncDispList(this);">
        <option value=""></option>
        <option value="1">BEIJING</option>
        <option value="2">SHANGHAI</option>
        <option value="3">CHONGQING</option>
        <option value="4">TIANJIN</option>
    </select>    
        
      <script>   
      function   fncDispList(){   
                      drp1.focus();   
                      var   WshShell   =   new   ActiveXObject("Wscript.Shell");   
                      try{   
                                      WshShell.SendKeys("%{DOWN}");   
                      }   
                      catch(e){}                     
                      WshShell.Quit;                     
      }   
      </script>
      

  2.   

    俺就不信邪，JS 一定可以做到！不过还有点儿瑕疵！高手来帮帮忙！L@_@K <body>
          <table border="1">
            <tr>
                <td valign="top">BigCity</td>
                <td>
                    <select id="selBigCity">
                        <option value=""></option>
                        <option value="1">BEIJING</option>
                        <option value="2">SHANGHAI</option>
                        <option value="3">CHONGQING</option>
                        <option value="4">TIANJIN</option>
                      </select>
                </td>
            </tr>
            <tr>
                <td>实现</td>
                <td>按 Tab 键焦点移动至 Select 时，选项自动展开，按首字母可实现选择同时确认，上下方向键移动，空格或回车键确认！</td>
            </tr>
            <tr>
                <td>问题</td>
                <td>俺尝试不让 td 被撑开，但是失败了！</td>
            </tr>
        </table>
    <script type="text/javascript">
    <!--
    var oBigCity = document.getElementById("selBigCity");oBigCity.onfocus = function ()
    {
        this.size = this.options.length;
    };
    oBigCity.onclick = function ()
    {
        this.blur();
        this.size = 1;
    };
    oBigCity.onkeypress = function ()
    {
        this.blur();
        this.size = 1;
    };
    //-->
    </script>
     </body>
      

  3.   

    呵呵，可以象你那样，不过这样会破坏页面的布局。
    象我那样写会被报病毒，
    要想可以的话只能用DIV模拟
    select框的级别很高，感觉最好不要想他的主意
      

  4.   

    不被撑的话，可以设置overflow属性和height属性，不过这样就显示不全了
      

  5.   

    <body>
          <table border="1">
            <tr>
                <td valign="top">BigCity</td>
                <td>
                    <select id="selBigCity" onmouseover="showAll()">
                        <option value=""></option>
                        <option value="1">BEIJING</option>
                        <option value="2">SHANGHAI</option>
                        <option value="3">CHONGQING</option>
                        <option value="4">TIANJIN</option>
                      </select>
                </td>
            </tr>
            <tr>
                <td>实现</td>
                <td>按 Tab 键焦点移动至 Select 时，选项自动展开，按首字母可实现选择同时确认，上下方向键移动，空格或回车键确认！</td>
            </tr>
            <tr>
                <td>问题</td>
                <td>俺尝试不让 td 被撑开，但是失败了！</td>
            </tr>
        </table>
    <script type="text/javascript">
    <!--
    var oBigCity = document.getElementById("selBigCity");
    var ytop=oBigCity.offsetTop+oBigCity.offsetHeight;
    oBigCity.onfocus = function ()
    {
        this.size = this.options.length;
        this.style.position="absolute";
       this.style.posTop=ytop;
    };
    oBigCity.onclick = function ()
    {
        this.blur();
        this.size = 1;
    };
    oBigCity.onkeypress = function ()
    {
        this.blur();
        this.size = 1;
    };
    //-->
    </script>
     </body>
    楼上的达人，这样就可以不被撑开了
    另：用隐藏层是不是更好？
      

  6.   

    不过结合 CSS 还是可以实现的，但还是不爽！L@_@K!      <table border="1">
            <tr>
                <td valign="top">BigCity</td>
                <td>
                    <select id="selBigCity" style="position: absolute; top: 19px;">
                        <option value=""></option>
                        <option value="1">BEIJING</option>
                        <option value="2">SHANGHAI</option>
                        <option value="3">CHONGQING</option>
                        <option value="4">TIANJIN</option>
                      </select>
                </td>
            </tr>
            <tr>
                <td>实现</td>
                <td>按 Tab 键焦点移动至 Select 时，选项自动展开，按首字母可实现选择同时确认，上下方向键移动，空格或回车键确认！</td>
            </tr>
            <tr>
                <td>问题</td>
                <td>style="position: absolute; top: 18px;" 还是不爽，因为俺不喜欢 absolute。</td>
            </tr>
        </table>脚本没动!
      

  7.   

    To Ischema(花客)兄弟解法和俺第二版的思路相似，但是位置会发生偏移，不够完美！看来如斑竹所讲，Select 确实比较麻烦！
      

  8.   

    加上滚动条 稍微修改下楼上兄弟们的程序
    <body>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
          <table border="1">
            <tr>
                <td valign="top">BigCity</td>
                <td>
                 <input type="hidden" name="temp">
                    <select id="selBigCity" >
                        <option value=""></option>
                        <option value="1">BEIJING</option>
                        <option value="2">SHANGHAI</option>
                        <option value="3">CHONGQING</option>
                        <option value="4">TIANJIN</option>
                      </select>
                </td>
            </tr>
            <tr>
                <td>实现</td>
                <td>按 Tab 键焦点移动至 Select 时，选项自动展开，按首字母可实现选择同时确认，上下方向键移动，空格或回车键确认！</td>
            </tr>
            <tr>
                <td>问题</td>
                <td>俺尝试不让 td 被撑开，但是失败了！</td>
            </tr>
        </table>
    <script type="text/javascript">
    <!--
    var oBigCity = document.getElementById("selBigCity");
    function getIE(e){
    var t=e.offsetTop;
    while(e=e.offsetParent){
    t+=e.offsetTop;
    }
    return t
    }
    oBigCity.onfocus = function ()
    {
        this.size = this.options.length;
        this.style.position="absolute";
        
       this.style.posTop=getIE(document.getElementById("temp"));
    };
    oBigCity.onclick = function ()
    {
        this.blur();
        this.size = 1;
    };
    oBigCity.onkeypress = function ()
    {
        this.blur();
        this.size = 1;
    };
    //-->
    </script>
     </body>
      

  9.   

    多谢斑竹提醒！确实当 options 较多或 Select 处于页面底部时选项就看不到了！只好让 LZ 凑合用了，哈
      

  10.   

    又有新想法了，能不能用javascript模拟键盘的alt + 下箭头。
    如果能模拟的话，我想应该可以实现。
      

  11.   

    肯定用javascript不能解决吗？我们公司不让用activex，还不想模拟，有没有直接的解决办法啊？
      

  12.   

    这篇文章写得比较好,在思路上有一定的启发和引导,我强烈的顶.
    如果用activex,在下拉框中能够实现数据多的情况下右边出现下拉条吗??如果我有120个选项,那全部显示出来就成问题了,我要让他一获得焦点的时候就出现20个选项,其余用滚动下拉条来进行选择,如何实现呢??先谢谢了,如果用javascript来实现,有怎么办呢??