是否可以使用 JS 打开 HTML 选择以显示其选项列表？ [复制]

【问题标题】：Is it possible to use JS to open an HTML select to show its option list? [duplicate]是否可以使用 JS 打开 HTML 选择以显示其选项列表？ [复制]
【发布时间】：2009-01-10 00:17:53
【问题描述】：

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

【问题讨论】：

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

标签： javascript html-select


【解决方案1】：

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

【讨论】：

  • 确定吗？
  • 我还希望我可以以编程方式为键盘用户打开一个选择。在 Firefox 中，更改事件在选择失去焦点之前不会触发，如果菜单实际上没有打开，则在您关闭选项卡时它不会选择任何内容。 LAME-O！
  • 检查这里jsfiddle.net/oscarj24/GR9jU工作示例
  • @Amit 在 Chrome（使用 v55）中（不再）工作
  • 你知道这方面的任何背景吗？是否出于某种安全原因不允许这样做？实施它的标准是否未能合并？由于一些模糊的技术限制，这在技术上是不可能的吗？换句话说，只是，为什么？
【解决方案2】：

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

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

【讨论】：

  • 这不只是隐藏/显示实际的选择字段吗？问题是关于显示/打开选项列表。
  • 我的方法确实显示/打开选项列表以及选择框本身。打开选项列表的唯一方法是单击选择框。我通过在一些目标文本上无形地覆盖选择来完成。
  • 这是唯一能够在 Android 的有缺陷的 WebView 中设置选择菜单按钮样式的解决方案。谢谢！
  • 谢谢，找了几个小时。这应该是公认的答案！
  • 这并没有回答问题，但它确实为您想要设置 的不透明度设置为 0，当用户单击不可见的选择时，选项的下拉菜单将正常显示。
【解决方案3】：

这适用于谷歌浏览器

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。
  • 这也适用于最新的基于 Chromium 的 Opera。
  • 不幸的是，现在Chrome 53+已弃用它
  • 它不适用于我在 PC/Mac 上，但它适用于移动设备（您还需要添加 mouseup 事件）。
  • 不适用于 Windows 上的 Chrome 59。
【解决方案4】：

我用这个...但它需要用户点击选择框...

这是 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，之前做过类似的事情，我相信我也将它的位置设置为绝对，当它展开时它不会破坏文档流，当它折叠时又回到阻塞。
  • 嘿，谢谢 Chad，您的 cmets 刚刚帮我解决了一个问题！希望我能 +1 你回来 ;)
  • 在我的情况下，它不能完全解决问题，但它是一种选择。 +1
  • @DarrylHein：在这种情况下，它不仅仅是 an 选项，它是 5 &lt;option&gt;s ...
  • 非常狡猾，谢谢。
【解决方案5】：

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

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

我也尝试在 Jquery 中实现这一点，使用 trigger 和 mousedown 或仅使用 mousedown 但没有成功。

【讨论】：

  • 这似乎不适用于 Firefox 50。
  • 不适用于 Windows 上的 Chrome 59。不过可以在 Windows 上使用 FireFox 51。
【解决方案6】：

这已经很晚了，但我认为如果有人参考这个问题，这可能对他们有用。我相信下面的 JS 会做所要求的。 

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

【讨论】：

  • 略有不同，因为这将调整选择的实际大小，而不是显示所有选择值。如果您只有 3 个选项（如您的示例所示），那么这将显示所有选项，但它也会调整页面的布局。
  • ~Rhys 谢谢！这让我有了更多的想法。试试这个，它将设置为选择控件所需的确切高度。 $("select:visible").each(function(i,e){e.size=e.length;});
  • 不是一个好主意。在选择元素上设置大小会将其从下拉列表更改为列表框（使用 Windows 控件术语）。这带来的问题是您现在必须照顾下拉菜单，包括放置（它不像真正的下拉菜单那样浮动在页面上方），关闭（如果用户单击其他地方，列表仍然可见）。我浪费了很多时间玩大小。无论如何，移动 Safari 似乎都忽略了它。
【解决方案7】：

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

【讨论】：

    【解决方案8】：

    我提出的解决方案安全、简单并且与 Internet Explorer、FireFox 和 Chrome 兼容。

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

    注意：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
    • 对我也不起作用。
    • @JonCoombs 是的，它有效。我有一个客户端应用程序，该解决方案运行良好。但是请注意，此代码已经有 2 年的历史了。我建议您自己在本地机器上测试一个 html 文件。还要注意你的 jquery 的版本。
    • @EduardoLucio 你能在这里把它转换成代码示例吗？
    • @1.21gigawatts 回到“基本”=D！创建一个文件夹。下载“jquery-1.3.2.js”code.jquery.com/jquery-1.3.2.js，创建一个包含“HTML CODE”内容的文件（“my.htm”）和一个包含“JAVASCRIPT CODE”内容的文件（“CustomSelect.js”） ”。将所有内容放入您创建的文件夹中。双击“my.htm”在浏览器中打开它。完毕！谢谢！ =D
    【解决方案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;

    复制自： Open close select

    【讨论】：

    • 这不是打开选择，这是展开它。
    【解决方案10】： 
    //use jquery
$select.trigger('mousedown')

    【讨论】：

    • 已经在 Firefox 37 和 Chrome 41 中进行了测试，以确认目前这不起作用。
    • 也许是时候删除这个答案了。
    • 在原版 js 中是 $select.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))，所以不需要 jquery。尽管如此，出于安全原因，代码不会打开下拉列表。
    猜你喜欢
    • 2011-04-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-06-20
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode