jquery 用JavaScript触发一个选择表单元素以显示其选项(打开下拉选项列表)

f45qwnt8  于 2023-11-17  发布在  jQuery
关注(0)|答案(6)|浏览(155)

以下是标记

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


但似乎什么都不起作用。这是什么事件以及如何触发?
谢谢

brqmpdu1

brqmpdu11#

有一次我在搜索如何做同样的事情,没有找到任何可行的解决方案,但后来我们JavaScript组的一个家伙想出了一个聪明的办法,下面是代码。

超文本标记语言

<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

egdjgwm8

egdjgwm82#

你可以用一个完全自定义的解决方案来 * 替换 * <select>元素,而不是实际上 * 显示 * <select>元素.但你不能以编程方式显示它,尤其是在IE中。
你可以做的 * 最接近 * 的是通过.focus()将用户移动到元素:

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

字符串
这与一些CSS样式的时候,它的重点(:focus)通常是一个很好的方式提请注意它。

yfwxisqw

yfwxisqw3#

如果您设置了size属性,select将显示您在size中指定的选项数。

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”将折叠所选内容。

drkbr07n

drkbr07n4#

不能触发选择表单元素上的点击事件,但正确的解决方法是这个插件:
jQuery.customSelect
最大的优点是它启动了真实的select元素(你实际上点击了一个看不见的select -opacity: 0),这在移动的设备上很重要(例如iPhone有自己的布局来显示select's选项)。
如果你不想下载整个插件,你可以自己准备解决方案,因为你知道如何触发select(通过设置opacity: 0隐藏它-它仍然可以点击)。

u2nhd7ah

u2nhd7ah5#

基于@肯纳贝克的答案,一个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);

字符串

dojqjjoe

dojqjjoe6#

initMouseEvent现在已弃用,请使用以下命令:

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

字符串

相关问题