使用 Javascript 触发选择表单元素以显示其选项（打开下拉选项列表）

Question

这是标记

<select id="person_prefix" name="prefix">
 <option value=""></option>
 <option value="Dr" selected="selected">Dr</option>
 <option value="Mr">Mr</option>
 <option value="Ms">Ms</option>
 <option value="Mrs">Mrs</option>
</select>

，我想触发一个 JavaScript 事件，以便选项列表下拉。使用 jquery 我尝试了以下操作：

$("#person_prefix").click();
$("#person_prefix").mousedown();
$("#person_prefix").change();

但似乎没有任何效果。这是哪个事件以及如何触发？

谢谢

Answer 1

我曾经在寻找如何做同样的事情，但没有找到任何有效的解决方案，但后来我们 javascript 小组的一个人提出了一个聪明的解决方案。这是代码。

HTML

<input type="button" id="show" value="show" />
<select id="myslect">
    <option>nothing</option>
    <option>something</option>
    <option>anything</option>
</select>

Javascript

$("#show").click(function () {
    var element = $("select")[0],
        worked = false;
    if(document.createEvent) { // chrome and safari
        var e = document.createEvent("MouseEvents");
        e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        worked = element.dispatchEvent(e);
    }
    if(!worked) { // unknown browser / error
        alert("It didn't worked in your browser.");
    }
});

我不知道如何链接到群组帖子，以便您可以看到整个线程。无论如何，这都要归功于 CJ Madolara。好工作！

更新： 仅适用于 Chrome 和 Safari

Answer 2

您无法以编程方式执行此跨浏览器操作。您可以用完全自定义的解决方案替换下拉列表，而实际上并不显示 元素...但您无法以编程方式显示它，尤其是在 IE 中。

您可以做的最接近是通过 .focus( 将用户移动到该元素)：

$("#person_prefix").focus();

在聚焦时使用一些 CSS 样式（:focus）通常是吸引注意力的好方法。

Answer 3

如果您设置尺寸属性，则选择将显示您在尺寸中指定的选项数量。

var sel= document.getElementsByName('select_1')[0];
var len= '10'// or sel.options.length;
// safest: var len=sel.getElementsByTagName('*').length;
sel.setAttribute('size',len)

将大小设置回“1”会折叠选择。

Answer 4

您无法在选择的表单元素上触发点击事件，但正确的解决方法是这个插件：
jQuery.customSelect

最大的优点是它启动了真正的select元素（您实际上单击了一个不可见的选择 - opacity: 0），这在移动设备上很重要（例如，iPhone 有自己的布局来显示 select 的 选项）。

如果您不想下载整个插件，您可以自己准备解决方案，因为您知道如何触发 select （通过设置 opacity: 0 隐藏它） - 它仍然是可点击的）。

Answer 5

基于 @kennebec 的答案，一个 jQuery 版本，用于获取选项和 optgroup 的计数：

var sel = $('select.mySelectClass'); 
var count=0;

sel.find('option').each(function() {

     count++;
});

sel.find('optgroups').each(function() {

     count++;
});

sel.attr('size',count);

Answer 6

initMouseEvent 现已弃用，请使用它：

let e = new MouseEvent('mousedown', {
  bubbles: true,
  cancelable: true,
  view: window
})
element.dispatchEvent(e)

Answer 7

您可以使用 HTMLSelectElement.showPicker() 方法例如，

document.getElementById('person_prefix').showPicker();

在撰写本文时，大多数最新的浏览器版本都支持此功能，但在 Safari 中的功能标志后面被禁用。