触发选择表单元素，以显示其选项（开启下拉选项列表）的JavaScript

这里是标记触发选择表单元素，以显示其选项（开启下拉选项列表）的JavaScript

<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();

但似乎没有任何工作。哪个事件是这样的，如何触发？

感谢

来源

2010-10-02 Savvas Georgiou

的[你怎么能告诉编程一个HTML选择地掉了下来（例如，由于鼠标悬停）？]可能的复制（https：//开头计算器.com/questions/249192/how-can-you-program-by-tell-an-html-select-to-drop-down-for-example-due） – rath 2017-10-10 10:34:42

你不能这样做跨浏览器编程。您可以具有完全定制的解决方案实际上并不显示一个<select>元素取代下拉...但你不能以编程方式表现出来，尤其是在IE浏览器。

的最接近你能做的就是通过.focus()移动用户的元素：

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

这与一些CSS样式时，它专注于（:focus）通常是提醒大家注意一个非常好的办法它。

来源

2010-10-02 17:17:00

如果您设置大小属性，select将显示您指定大小的选项数。

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'将折叠选择。

来源

2010-10-02 20:07:28 kennebec

某些浏览器不考虑optgroups，其他人则将它们计为选项因此如果您有2个optgroups并指定options.length或10，则不显示10个选项。 – kennebec 2010-10-02 20:11:46

对不起，我结结巴巴地回复了我自己的评论。 – kennebec 2010-10-02 20:11:46

您可以选择表单元素，但适当的解决方法上没有触发点击事件是这个插件：
jQuery.customSelect

的最大优点是，它推出真正select元素（你实际点击一个无形选择 - opacity: 0），这是在移动设备上重要的（如iPhone有自己的布局显示select's选项）。

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

来源

2013-02-06 15:01:11 matewka

基础上@肯纳贝克的答案，一个jQuery版本，以获得的选项和optgroups计数：

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

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

    count++; 
}); 

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

    count++; 
}); 

sel.attr('size',count);

来源

2013-05-16 20:51:58 jsh

'var count = sel.find（'option，optgroups'）。length;' – 2014-09-05 19:00:09

我曾经寻找如何做同样的事情，并没有发现任何可行的解决方案，但随后我们的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马多拉拉。做得好！

更新：仅适用于Chrome和Safari

来源

2014-07-08 09:57:03

嘿你的解决方案对我来说很有效，但是选择选项在点击结束时消失。你将如何做到这一点，以保持选择选项显示，直到实际选择一个选项？ – 2015-11-27 17:59:09

触发选择表单元素，以显示其选项（开启下拉选项列表）的JavaScript

回答

相关问题