是否可以使用JavaScript打开HTML选择以显示其选项列表？

评论

顺便说一句，此功能有什么需求？只是好奇...
这样做的一个好理由是支持键盘快捷键（如今，很多网站都在使用键盘快捷键，例如Twitter，GitHub，G +）。
您已经可以使用键盘打开选择字段。通常，（取决于您的浏览器）您可以选择字段，然后按向下或向上箭头打开选择内容并滚动选择选项。
@DarrylHein，上下箭头在我的数据表中的下拉菜单中不起作用...。我希望这样做，如果有函数存在，我一直在尝试将箭头分配给该函数...

#1 楼

不幸的是，这个问题有一个简单的答案，那就是“不”

评论

确定吗？

– Christophh
09年1月10日，0：42
我也希望我可以以编程方式为键盘用户打开一个选择。在Firefox中，更改事件只有在选择失去焦点后才会触发，并且如果菜单没有真正打开，则在您关闭菜单时不会选择任何内容。 LAME-O！

– Marcy Sutton
2010-12-8 23:23
在这里查看jsfiddle.net/oscarj24/GR9jU工作示例

–提交
16年1月1日在20:09
@Amit在Chrome（使用v55）中无法再使用

– HammerNL
17年1月20日在13:57
您是否了解与此有关的任何情况？是否出于某种安全原因而不允许使用？实施该标准的标准是否合并？由于某些模糊的技术限制，在技术上是否不可能？换句话说，为什么呢？

–马蒂亚斯·马滕斯（Mattias Martens）
19-10-7在6:13

#2 楼

我遇到了这个问题...并找到了可行的解决方案。

我不希望选择框显示，直到用户单击一些纯HTML为止。所以我在select元素上覆盖了opacity=.01。单击后，将其更改回opacity=100。这使我可以隐藏选择，并且当用户单击文本时，显示选择并显示选项。

评论

这不只是隐藏/显示实际的选择字段吗？问题是关于显示/打开选项列表。

–达里尔·海因（Darryl Hein）
09-09-28 22:29
我的方法确实显示/打开选项列表以及选择框本身。打开选项列表的唯一方法是单击选择框。我通过在部分目标文本上无形地覆盖选择内容来实现。

–菲尔
09-09-29 15:24
这是唯一能够在错误的Android WebView中设置选择菜单按钮样式的解决方案。谢谢！

– Riplexus
13年6月16日在16:34
谢谢，一直在找几个小时。这应该是公认的答案！

–avb
2014年7月10日在9:48
这不能回答问题，但是确实提供了一种解决方法，适用于您希望样式化的不透明度设置为0，则当用户单击不可见的select时，选项的下拉菜单将正常显示。

–克里斯·斯奈德（Chris Snyder）
15年7月21日在14:57


#3 楼

我用这个...但是它要求用户单击选择框...

这是2个javascript函数

function expand(obj)
{
    obj.size = 5;
}
function unexpand(obj)
{
    obj.size = 1;
}


然后我创建选择框

<select id="test" multiple="multiple" name="foo" onFocus="expand(this)" onBlur="unexpand(this)">
<option >option1</option>
<option >option2</option>
<option >option3</option>
<option >option4</option>
<option >option5</option>
</select>


我知道这段代码有些晚了，但是我希望它可以帮助遇到与我相同的问题的人。

ps / fyi
我没有测试上面的代码（我动态创建了我的选择框），并且我编写的代码仅在FireFox中进行了测试。

评论

+1，之前做过类似的事情，我相信我在扩展时也将其位置设置为绝对，这样它就不会破坏文档流，而在折叠时又回到了阻塞状态。

–CaffGeek
09-10-9在19:05
嘿，谢谢乍得，您的意见帮助我解决了一个问题！希望我可以+1你回来;）

–Jason de Belle
09年10月9日在19:42
就我而言，它不能完全解决问题，但这是一个选择。 +1

–达里尔·海因（Darryl Hein）
09-10-9 22:07
@DarrylHein：在这种情况下，它不只是一个选项，而是5个

#4 楼

此功能可在Google Chrome浏览器上运行

dropDown = function (elementId) {
    var dropdown = document.getElementById(elementId);
    try {
        showDropdown(dropdown);
    } catch(e) {

    }
    return false;
};

showDropdown = function (element) {
    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    element.dispatchEvent(event);
};


评论

仅供参考：它确实在Chrome 35.0.1916.153上对我有用，请确保您传递的是实际元素，而不是jQuery obj。

– ShawnFumo
2014年7月3日在19:30
这也适用于最新的基于Chromium的Opera。

– NoOne
2015年4月25日在16:22
不幸的是，Chrome 53+现在不推荐使用

–华盛顿瓜迪斯
16-09-27在19:58
它不适用于PC / Mac，但适用于移动设备（您还需要添加mouseup事件）。

– EvgenyKolyakov
17-2-25在10:16
在Windows上无法使用Chrome 59。

–rainabba
17年4月19日在21:54

#5 楼

这已经很晚了，但是我认为如果有人提到这个问题，这可能对他们有用。我相信下面的JS会做什么。 

<script>     
         $(document).ready(function()
           {
          document.getElementById('select').size=3;
           });
    </script>


评论

稍有不同，因为这将调整选择的实际大小，而不显示所有选择值。如果像示例中那样只有3个选项，则将显示所有这些选项，但也会调整页面的布局。

–达里尔·海因（Darryl Hein）
2012年11月5日在2:28
〜谢谢！这使我有了更多的想法。试试看，它将设置为选择控件所需的确切高度。 $（“ select：visible”）。each（function（i，e）{e.size = e.length;}）;

–萨博
2013年6月3日11:22


这不是一个好主意。在选择元素上设置大小会将其从下拉列表更改为列表框（使用Windows控件术语）。带来的问题是，您现在必须照顾下拉列表，包括放置（它不像真正的下拉列表一样浮动在页面上方），关闭（如果用户单击其他位置，列表仍然可见）。我浪费了很多时间玩尺寸游戏。无论如何，移动式的野生动物园似乎还是忽略了它。

–axeman
2015年4月14日在2:26

#6 楼

我相当确定答案是：否。您可以使用JavaScript选择选项，但不能打开选择。您必须使用自定义解决方案。

#7 楼

我介绍的解决方案安全，简单并且与Internet Explorer，FireFox和Chrome兼容。

这种方法是全新且完整的。我在互联网上找不到与该解决方案相同的东西。简单，跨浏览器（Internet Explorer，Chrome和Firefox），保留布局，使用选择本身且易于使用。

注意：必须使用JQuery。

HTML代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CustonSelect</title>
<script type="text/javascript" src="./jquery-1.3.2.js"></script>
<script type="text/javascript" src="./CustomSelect.js"></script>
</head>
<div id="testDiv"></div>
<body>
    <table>
        <tr>
            <td>
                <select id="Select0" >
                    <option value="0000">0000</option>
                    <option value="0001">0001</option>
                    <option value="0002">0002</option>
                    <option value="0003">0003</option>
                    <option value="0004">0004</option>
                    <option value="0005">0005</option>
                    <option value="0006">0006</option>
                    <option value="0007">0007</option>
                    <option value="0008">0008</option>
                    <option value="0009">0009</option>
                    <option value="0010">0010</option>
                    <option value="0011">0011</option>
                    <option value="0012">0012</option>
                    <option value="0013">0013</option>
                    <option value="0014">0014</option>
                    <option value="0015">0015</option>
                    <option value="0016">0016</option>
                    <option value="0017">0017</option>
                    <option value="0018">0018</option>
                    <option value="0019">0019</option>
                    <option value="0020">0020</option>
                    <option value="0021">0021</option>
                    <option value="0022">0022</option>
                    <option value="0023">0023</option>
                    <option value="0024">0024</option>
                    <option value="0025">0025</option>
                    <option value="0026">0026</option>
                    <option value="0027">0027</option>
                    <option value="0028">0028</option>
                    <option value="0029">0029</option>
                    <option value="0030">0030</option>
                    <option value="0031">0031</option>
                    <option value="0032">0032</option>
                    <option value="0033">0033</option>
                    <option value="0034">0034</option>
                    <option value="0035">0035</option>
                    <option value="0036">0036</option>
                    <option value="0037">0037</option>
                    <option value="0038">0038</option>
                    <option value="0039">0039</option>
                    <option value="0040">0040</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <select id="Select1" >
                    <option value="0000">0000</option>
                    <option value="0001">0001</option>
                    <option value="0002">0002</option>
                    <option value="0003">0003</option>
                    <option value="0004">0004</option>
                    <option value="0005">0005</option>
                    <option value="0006">0006</option>
                    <option value="0007">0007</option>
                    <option value="0008">0008</option>
                    <option value="0009">0009</option>
                    <option value="0010">0010</option>
                    <option value="0011">0011</option>
                    <option value="0012">0012</option>
                    <option value="0013">0013</option>
                    <option value="0014">0014</option>
                    <option value="0015">0015</option>
                    <option value="0016">0016</option>
                    <option value="0017">0017</option>
                    <option value="0018">0018</option>
                    <option value="0019">0019</option>
                    <option value="0020">0020</option>
                    <option value="0021">0021</option>
                    <option value="0022">0022</option>
                    <option value="0023">0023</option>
                    <option value="0024">0024</option>
                    <option value="0025">0025</option>
                    <option value="0026">0026</option>
                    <option value="0027">0027</option>
                    <option value="0028">0028</option>
                    <option value="0029">0029</option>
                    <option value="0030">0030</option>
                    <option value="0031">0031</option>
                    <option value="0032">0032</option>
                    <option value="0033">0033</option>
                    <option value="0034">0034</option>
                    <option value="0035">0035</option>
                    <option value="0036">0036</option>
                    <option value="0037">0037</option>
                    <option value="0038">0038</option>
                    <option value="0039">0039</option>
                    <option value="0040">0040</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <select id="Select2" >
                    <option value="0000">0000</option>
                    <option value="0001">0001</option>
                    <option value="0002">0002</option>
                    <option value="0003">0003</option>
                    <option value="0004">0004</option>
                    <option value="0005">0005</option>
                    <option value="0006">0006</option>
                    <option value="0007">0007</option>
                    <option value="0008">0008</option>
                    <option value="0009">0009</option>
                    <option value="0010">0010</option>
                    <option value="0011">0011</option>
                    <option value="0012">0012</option>
                    <option value="0013">0013</option>
                    <option value="0014">0014</option>
                    <option value="0015">0015</option>
                    <option value="0016">0016</option>
                    <option value="0017">0017</option>
                    <option value="0018">0018</option>
                    <option value="0019">0019</option>
                    <option value="0020">0020</option>
                    <option value="0021">0021</option>
                    <option value="0022">0022</option>
                    <option value="0023">0023</option>
                    <option value="0024">0024</option>
                    <option value="0025">0025</option>
                    <option value="0026">0026</option>
                    <option value="0027">0027</option>
                    <option value="0028">0028</option>
                    <option value="0029">0029</option>
                    <option value="0030">0030</option>
                    <option value="0031">0031</option>
                    <option value="0032">0032</option>
                    <option value="0033">0033</option>
                    <option value="0034">0034</option>
                    <option value="0035">0035</option>
                    <option value="0036">0036</option>
                    <option value="0037">0037</option>
                    <option value="0038">0038</option>
                    <option value="0039">0039</option>
                    <option value="0040">0040</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <select id="Select3" >
                    <option value="0000">0000</option>
                    <option value="0001">0001</option>
                    <option value="0002">0002</option>
                    <option value="0003">0003</option>
                    <option value="0004">0004</option>
                    <option value="0005">0005</option>
                    <option value="0006">0006</option>
                    <option value="0007">0007</option>
                    <option value="0008">0008</option>
                    <option value="0009">0009</option>
                    <option value="0010">0010</option>
                    <option value="0011">0011</option>
                    <option value="0012">0012</option>
                    <option value="0013">0013</option>
                    <option value="0014">0014</option>
                    <option value="0015">0015</option>
                    <option value="0016">0016</option>
                    <option value="0017">0017</option>
                    <option value="0018">0018</option>
                    <option value="0019">0019</option>
                    <option value="0020">0020</option>
                    <option value="0021">0021</option>
                    <option value="0022">0022</option>
                    <option value="0023">0023</option>
                    <option value="0024">0024</option>
                    <option value="0025">0025</option>
                    <option value="0026">0026</option>
                    <option value="0027">0027</option>
                    <option value="0028">0028</option>
                    <option value="0029">0029</option>
                    <option value="0030">0030</option>
                    <option value="0031">0031</option>
                    <option value="0032">0032</option>
                    <option value="0033">0033</option>
                    <option value="0034">0034</option>
                    <option value="0035">0035</option>
                    <option value="0036">0036</option>
                    <option value="0037">0037</option>
                    <option value="0038">0038</option>
                    <option value="0039">0039</option>
                    <option value="0040">0040</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <select id="Select4" >
                    <option value="0000">0000</option>
                    <option value="0001">0001</option>
                    <option value="0002">0002</option>
                    <option value="0003">0003</option>
                    <option value="0004">0004</option>
                    <option value="0005">0005</option>
                    <option value="0006">0006</option>
                    <option value="0007">0007</option>
                    <option value="0008">0008</option>
                    <option value="0009">0009</option>
                    <option value="0010">0010</option>
                    <option value="0011">0011</option>
                    <option value="0012">0012</option>
                    <option value="0013">0013</option>
                    <option value="0014">0014</option>
                    <option value="0015">0015</option>
                    <option value="0016">0016</option>
                    <option value="0017">0017</option>
                    <option value="0018">0018</option>
                    <option value="0019">0019</option>
                    <option value="0020">0020</option>
                    <option value="0021">0021</option>
                    <option value="0022">0022</option>
                    <option value="0023">0023</option>
                    <option value="0024">0024</option>
                    <option value="0025">0025</option>
                    <option value="0026">0026</option>
                    <option value="0027">0027</option>
                    <option value="0028">0028</option>
                    <option value="0029">0029</option>
                    <option value="0030">0030</option>
                    <option value="0031">0031</option>
                    <option value="0032">0032</option>
                    <option value="0033">0033</option>
                    <option value="0034">0034</option>
                    <option value="0035">0035</option>
                    <option value="0036">0036</option>
                    <option value="0037">0037</option>
                    <option value="0038">0038</option>
                    <option value="0039">0039</option>
                    <option value="0040">0040</option>
                </select>
            </td>
        </tr>
    </table>
    <input type="button" id="Button0" value="MoveLayout!"/>
</body>
</html>


JAVASCRIPT代码

var customSelectFields = new Array();


// Note: The list of selects to be modified! By Questor
customSelectFields[0] = "Select0";
customSelectFields[1] = "Select1";
customSelectFields[2] = "Select2";
customSelectFields[3] = "Select3";
customSelectFields[4] = "Select4";

$(document).ready(function()
{


    //Note: To debug! By Questor
    $("#Button0").click(function(event){ AddTestDiv(); });

    StartUpCustomSelect(null);  

});


//Note: To test! By Questor
function AddTestDiv()
{
    $("#testDiv").append("<div style=\"width:100px;height:100px;\"></div>");
}


//Note: Startup selects customization scheme! By Questor
function StartUpCustomSelect(what)
{

    for (i = 0; i < customSelectFields.length; i++)
    {

        $("#" + customSelectFields[i] + "").click(function(event){ UpCustomSelect(this); });
        $("#" + customSelectFields[i] + "").wrap("<div id=\"selectDiv_" + customSelectFields[i] + "\" onmouseover=\"BlockCustomSelectAgain();\" status=\"CLOSED\"></div>").parent().after("<div id=\"coverSelectDiv_" + customSelectFields[i] + "\" onclick=\"UpOrDownCustomSelect(this);\" onmouseover=\"BlockCustomSelectAgain();\"></div>");


        //Note: Avoid breaking the layout when the CSS is modified from "position" to "absolute" on the select! By Questor
        $("#" + customSelectFields[i] + "").parent().css({'width': $("#" + customSelectFields[i] + "")[0].offsetWidth + 'px', 'height': $("#" + customSelectFields[i] + "")[0].offsetHeight + 'px'});

        BlockCustomSelect($("#" + customSelectFields[i] + ""));

    }
}


//Note: Repositions the div that covers the select using the "onmouseover" event so 
//Note: if element on the screen move the div always stand over it (recalculate! By Questor
function BlockCustomSelectAgain(what)
{
    for (i = 0; i < customSelectFields.length; i++)
    {
        if($("#" + customSelectFields[i] + "").parent().attr("status") == "CLOSED")
        {
            BlockCustomSelect($("#" + customSelectFields[i] + ""));
        }
    }
}


//Note: Does not allow the select to be clicked or clickable! By Questor
function BlockCustomSelect(what)
{

    var coverSelectDiv = $(what).parent().next();


    //Note: Ensures the integrity of the div style! By Questor
    $(coverSelectDiv).removeAttr('style');


    //Note: To resolve compatibility issues! By Questor
    var backgroundValue = "";
    var filerValue = "";
    if(navigator.appName == "Microsoft Internet Explorer")
    {
        backgroundValue = 'url(fakeimage)';
        filerValue = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=\'scale\', src=\'fakeimage\' )';
    }


    //Note: To debug! By Questor
    //'border': '5px #000 solid',

    $(coverSelectDiv).css({
        'position': 'absolute', 
        'top': $(what).offset().top + 'px', 
        'left': $(what).offset().left + 'px', 
        'width': $(what)[0].offsetWidth + 'px', 
        'height': $(what)[0].offsetHeight + 'px', 
        'background': backgroundValue,
        '-moz-background-size':'cover',
        '-webkit-background-size':'cover',
        'background-size':'cover',
        'filer': filerValue
    });

}


//Note: Allow the select to be clicked or clickable! By Questor
function ReleaseCustomSelect(what)
{

    var coverSelectDiv = $(what).parent().next();

    $(coverSelectDiv).removeAttr('style');
    $(coverSelectDiv).css({'display': 'none'});

}


//Note: Open the select! By Questor
function DownCustomSelect(what)
{


    //Note: Avoid breaking the layout. Avoid that select events be overwritten by the others! By Questor
    $(what).css({
        'position': 'absolute', 
        'z-index': '100'
    });


    //Note: Open dropdown! By Questor
    $(what).attr("size","10");

    ReleaseCustomSelect(what);


    //Note: Avoids the side-effect of the select loses focus.! By Questor
    $(what).focus();


    //Note: Allows you to select elements using the enter key when the select is on focus! By Questor
    $(what).keyup(function(e){
        if(e.keyCode == 13)
        {
            UpCustomSelect(what);
        }
    });


    //Note: Closes the select when loses focus! By Questor
    $(what).blur(function(e){
        UpCustomSelect(what);
    });

    $(what).parent().attr("status", "OPENED");

}


//Note: Close the select! By Questor
function UpCustomSelect(what)
{

    $(what).css("position","static");


    //Note: Close dropdown! By Questor
    $(what).attr("size","1");

    BlockCustomSelect(what);

    $(what).parent().attr("status", "CLOSED");

}


//Note: Closes or opens the select depending on the current status! By Questor
function UpOrDownCustomSelect(what)
{

    var customizedSelect = $($(what).prev().children()[0]);

    if($(what).prev().attr("status") == "CLOSED")
    {
        DownCustomSelect(customizedSelect);
    }
    else if($(what).prev().attr("status") == "OPENED")
    {
        UpCustomSelect(customizedSelect);
    }

}


评论

我用这个创建了一个jsfiddle，它似乎不起作用... jsfiddle.net/rL53xj11

– mix3d
2015年9月30日19:07在
也不适合我

–琼·库姆斯
16 Dec 12'在21:47
@JonCoombs是的，它有效。我有一个客户端应用程序，该解决方案可以完美运行。但是请注意，该代码已经存在2年了。我建议您自己在本地计算机上的html文件上进行测试。还要注意您的jQuery版本。

–爱德华多·卢西奥（Eduardo Lucio）
16 Dec 16'在18:42
@EduardoLucio您可以在此处将其转换为代码示例吗？

– 1.21吉瓦
19年7月14日在23:03
@ 1.21gigawatts回到“基本” = D！创建一个文件夹。下载“ jquery-1.3.2.js” code.jquery.com/jquery-1.3.2.js，创建一个包含“ HTML CODE”内容和一个文件（“ CustomSelect”）的文件（“ my.htm”）。 js”），其内容为“ JAVASCRIPT CODE”。将所有内容放入您创建的文件夹中。双击“ my.htm”以在浏览器中将其打开。做完了！谢谢！ = D

–爱德华多·卢西奥（Eduardo Lucio）
19年7月16日在19:48

#8 楼

在尝试解决此问题一段时间后，我设法提供了一个有效的可行解决方案：

var event = new MouseEvent('mousedown');
element.dispatchEvent(event);


我试图在Jquery中实现为好，仅使用trigger和mousedown或仅使用mousedown，但没有成功。

评论

这似乎在Firefox 50中不起作用。

– Mathieu Bridon
17年1月13日在17:28
在Windows上无法使用Chrome 59。可以在Windows上与FireFox 51一起使用。

–rainabba
17-4-19在21:54


#9 楼

<select id="myDropDown">
  <option>html5</option>
  <option>javascript</option>
  <option>jquery</option>
  <option>css</option>
  <option>sencha</option>
</select>


通过jQuery：

var myDropDown=$("#myDropDown");
var length = $('#myDropDown> option').length;
//open dropdown
myDropDown.attr('size',length);
//close dropdown
myDropDown.attr('size',0);


通过javascript：

var myDropDown=document.getElementById("myDropDown");
var length = myDropDown.options.length;
//open dropdown
myDropDown.size = length;
//close dropdown
myDropDown.size = 0;


已复制来自：打开关闭选择

评论

这不是打开选择，而是在扩展它。

–方位角
18年8月16日在12:22

#10 楼

//use jquery
$select.trigger('mousedown')


评论

已在Firefox 37和Chrome 41中进行了测试，以确认当前无法使用。

–卢拉拉拉
2015年4月9日在7:40


也许是时候删除此答案了。

–乔斯·曼努埃尔·阿巴卡·罗德里格斯（Jose Manuel AbarcaRodríguez）
17年1月10日在19:00
在香草js中将是$ select.dispatchEvent（new MouseEvent（'mousedown'，{bubble：true}）），因此不需要jquery。尽管如此，出于安全原因，该代码无法打开下拉列表。

–user670839
4月13日19:08