如何以编程方式告诉HTML SELECT下拉(例如,由于鼠标悬停)？

Question

如何以编程方式告诉HTML select下拉(例如,由于鼠标悬停)？

Answer 1

这实际上可以使用HTML + Javascript,尽管其他人都说它不是.

但是,这仅适用于Chrome.如果您有兴趣,请阅读更多内容.

根据W3C HTML5工作草案,第3.2.5.1.7节.互动内容:

HTML中的某些元素具有激活行为,这意味着用户可以激活它们.这会触发一系列依赖于激活机制的事件,例如使用键盘或语音输入,或通过鼠标点击.

当用户以非点击方式触发具有已定义激活行为的元素时,交互事件的默认操作必须是对元素执行合成点击激活步骤.

<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中的方法,请随时修改此小提琴.

Answer 2

Xavier Ho的答案是如何解决当前大多数浏览器中的问题.但是,"不再通过JavaScript发送/修改"事件是一种很好的做法.(就像mousedown在这种情况下)

从版本53+开始,Google Chrome 不会对不受信任的事件执行默认操作.例如由脚本创建或修改的事件,或通过dispatchEvent方法调度的事件.这个更改是为了与Firefox和IE对齐,我认为已经没有执行该操作.

出于测试目的,Fiddle提供Xavier的答案不适用于chrome 53+.(我不测试FF和IE).

参考链接:

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

并且不推荐使用 initMouseEvent

Answer 3

这是我能得到的最接近的,更改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>

Answer 4

您不能使用HTML select标记执行此操作,但可以使用JavaScript 和 HTML执行此操作.有各种各样的现有控件执行此操作 - 例如,附加到SO"有趣/忽略标记"条目的"建议"列表,或Gmail查找电子邮件地址.

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

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

Answer 5

我有同样的问题,我发现解决这个问题的简单方法是使用html和css.

select{
  opacity: 0;
  position: absolute;
}

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

Answer 6

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

似乎版本53的chrome禁用了Asim K T所述的功能.

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

受信任事件不应触发默认操作(单击事件除外).

然而,他们已经在webview中启用了它,但我没有对此进行测试.

我们发现一些网页浏览器正在使用其中的快速点击,并且由于存在破损的风险,即使它们不受信任,我们也会允许选择mousedown.

在这个讨论中,让开发人员以编程方式打开下拉列表的想法被放弃了.

Answer 7

如果有人还在寻找这个:

<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(或任何其他元素),以便它可以直接与用户交互.