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

这是标记

  Dr Mr Ms Mrs  

我想触发一个javascript事件,以便选项列表下降。 使用jquery我尝试了以下内容:

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

但似乎没什么用。 这是哪个事件以及如何触发?

谢谢

我曾经一直在寻找如何做同样的事情并没有找到任何可行的解决方案但是我们的javascript小组中的一个人带来了一个聪明的工作。 这是代码。

HTML

   

使用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."); } }); 

我不确定如何链接到组post,以便您可以看到整个post。 无论如何归功于CJ Madolara。 做得好!

更新: 仅适用于Chrome和Safari

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

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

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

这有一些CSS样式,当它聚焦( :focus )时通常是引起人们注意的一种很好的方式。

如果设置size属性,则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”会折叠选择。

无法在选择表单元素上触发单击事件,但正确的解决方法是此插件:
jQuery.customSelect

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

如果您不想下载整个插件,那么您可以自己准备解决方案,因为您知道如何触发select (通过设置opacity: 0隐藏它opacity: 0 – 它仍然可以点击)。

建立@Kennebec的答案,一个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);