您如何以编程方式告诉HTML SELECT下拉列表（例如，由于鼠标悬停）？

您如何以编程方式告诉HTML select下拉列表（例如，由于鼠标悬停所致）？

您不能使用HTML select标签来做到这一点，但是可以使用JavaScript 和 HTML 来做到这一点。有各种各样的现有控件可以执行此操作-例如，附加到SO“有趣/忽略标签”条目的“建议”列表，或Gmail的电子邮件地址查询。

有许多提供此功能的JavaScript + HTML控件-寻找想法的自动完成控件。

请参阅此链接以获取自动完成控件... http://ajaxcontroltoolkit.codeplex.com/

尽管人们在其他地方都说不是，但过去使用HTML + Javascript确实可以做到这一点，但后来不推荐使用，现在不起作用。

但是，这仅在Chrome中有效。如果您有兴趣，请阅读更多内容。

根据W3C HTML5工作草案第3.2.5.1.7节。互动内容：

HTML中的某些元素具有激活行为，这意味着用户可以激活它们。daccess-ods.un.org daccess-ods.un.org这会根据激活机制触发一系列事件，例如使用键盘或语音输入，或通过单击鼠标。

当用户以不同于单击的方式触发具有定义的激活行为的元素时，交互事件的默认操作必须是运行在元素上合成的单击激活步骤。

<select>作为交互式内容，我相信可以以编程方式显示其内容<option>。玩了几个小时后，我发现document.createEvent()和.dispatchEvent()可以工作。

就是说，演示时间。 这是工作中的小提琴。

HTML：

<select id="dropdown">
    <option value="Red">Red</option>
    <option value="Green">Green</option>
    <option value="Blue">Blue</option>
</select>
<br>
<button id="fire" type="button" onclick="runThis()">Show dropdown items</button>​

Javascript：

// <select> element displays its options on mousedown, not click.
showDropdown = function (element) {
    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    element.dispatchEvent(event);
};

// This isn't magic.
window.runThis = function () { 
    var dropdown = document.getElementById('dropdown');
    showDropdown(dropdown);
};

如果有人找到了一种方法，但在Chrome中却找不到，请随时修改此小提琴。

Xavier Ho的答案涵盖了如何解决当前大多数浏览器中的问题。但是，优良作法是“不再通过JavaScript调度/修改”事件。（mousedown在这种情况下）

从版本53+开始，Google Chrome 将不会对不受信任的事件执行默认操作。例如通过脚本创建或修改的事件，或者通过dispatchEvent方法。此更改是为了与Firefox和IE保持一致，我认为它们尚未执行该操作。

出于测试目的，小提琴提供了Xavier的答案不适用于chrome 53+。（我不测试FF和IE）。

参考链接：

https://www.chromestatus.com/features/57188​​03933560832 https://www.chromestatus.com/features/6461137440735232

而且不建议使用 initMouseEvent

这是我能得到的最接近的值，更改元素onmouseover的大小，并恢复onmouseout的大小：

       <select onMouseOut="this.size=1;" onMouseOver="this.size=this.length;">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>

我有同样的问题，找到解决这个问题的简单方法是使用html和css。

select{
  opacity: 0;
  position: absolute;
}

<select>
  <option>option 1</option>
  <option>option 2</option>
  <option>option 3</option>
</select>
<button>click</button>

我认为这在Chrome中不再可行。

如Asim K T所述，Chrome版本53似乎禁用了此功能。

根据规格 http://www.w3.org/TR/DOM-Level-3-Events/#trusted-events

可信事件不应触发默认操作（单击事件除外）。

但是他们已经在webview中启用了它，但是我还没有测试过。

我们发现某些Web视图在其中使用了fastclick，由于存在损坏的风险，即使它们不受信任，我们也将允许在选择上进行鼠标按下。

在此讨论中，放弃了让开发人员以编程方式打开下拉菜单的想法。

如果仍然有人在寻找这个：

<select id="dropdown">
    <option value="Red">Red</option>
    <option value="Green">Green</option>
    <option value="Blue">Blue</option>
</select>
<br>
<button id="fire" type="button" >Show dropdown items</button>

Javascript：

var is_visible=false; 

$(document).ready(function(){

    $('#fire').click(function (e) { 
    var element = document.getElementById('dropdown');


    if(is_visible){is_visible=false; return;}
    is_visible = true;

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

    /* can be added for i.e. compatiblity.
      optionsSelect.focus();
       var WshShell = new ActiveXObject("WScript.Shell");
       WshShell.SendKeys("%{DOWN}");
    */
    e.stopPropagation();
    return false;
});


$(document).click(function(){is_visible=false; });
});

更新：

直到没有一个完美的解决方案来解决这个问题，但是您可以尝试避免这种情况。你为什么要这样做。我想知道几个月前的解决方案，以便为移动设备制作一个精选插件

https://github.com/HemantNegi/jquery.sumoselect

最后，使用透明的select元素屏蔽了自定义div（或其他任何元素），以便它可以直接与用户交互。

这是我发现的最好方法。注意它仅适用于Windows上的IE，并且您的网络可能需要位于安全区域中-因为我们访问外壳程序。诀窍是ALT向下箭头是打开选择下拉菜单的快捷键。

<button id="optionsButton" style="position:absolute;top:10px;left:10px;height:22px;width:100px;z-index:10" onclick="doClick()">OPTIONS</button>
<select id="optionsSelect" style="position:absolute;top:10px;left:10px;height:20px;width:100px;z-index:9">
    <option>ABC</option>
    <option>DEF</option>
    <option>GHI</option>
    <option>JKL</option>
</select>
<script type="text/javascript">
   function doClick() {
       optionsSelect.focus();
       var WshShell = new ActiveXObject("WScript.Shell");
       WshShell.SendKeys("%{DOWN}");
   }
</script>

当您想做的事情时，不要以为一件事情是不可能的，没有什么事情是不可能做的。

使用这个家伙创建的扩展JS函数。

http://code.google.com/p/expandselect/

包括此JS，然后只需将传递参数的参数作为您的选择ID即可，如下所示：

ExpandSelect(MySelect)

我可能是错的，但是我不相信默认选择框可以做到。您可以使用JS和CSS来实现所需的结果，但（据我所知）不能执行普通的SELECT。

通过此问题中提到的一些解决方法以及类似的解决方法，可以打开“ HTML选择”。但是，更干净的方法是将选择库添加到项目中，例如“ select2”或“ chosen”。例如，以编程方式打开select2将很容易：

$('#target-select').select2('open');

这并不是您所要的，但我喜欢此解决方案的简单性。在大多数情况下，我想启动下拉菜单，这是因为我正在验证用户实际上已经做出选择。我更改下拉菜单的大小并将其聚焦，这很好地突出了他们跳过的内容：

$('#cboSomething')[0].size = 3;
$('#cboSomething')[0].focus();