jQuery 如何使用jquery打开选择元素
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/16157459/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to open select element using jquery
提问by Parag A
I have a select element as follows. i want to open it without user having to click on it.
我有一个 select 元素,如下所示。我想打开它而无需用户点击它。
<select id="selId" class="pos_fixed">
<option value="volvo">Option1</option>
<option value="saab">Option2</option>
<option value="mercedes">Option3</option>
<option value="audi">Option4</option>
</select>
Please let me know if its possible using jquery or javascript
请让我知道是否可以使用 jquery 或 javascript
回答by kyle.stearns
You will pass a CSS selector to openSelect()
and it will open the select
element for you.
您将传递一个 CSS 选择器openSelect()
,它会select
为您打开元素。
var openSelect = function(selector){
var element = $(selector)[0], worked = false;
if (document.createEvent) { // all browsers
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);
} else if (element.fireEvent) { // ie
worked = element.fireEvent("onmousedown");
}
if (!worked) { // unknown browser / error
alert("It didn't worked in your browser.");
}
}
$(function(){ // when DOM is ready
// open .select element
openSelect('.select');
});
Here's a fiddle: http://jsfiddle.net/Z48wF/1/
这是一个小提琴:http: //jsfiddle.net/Z48wF/1/
Source: How to open the select input using jquery@stackoverflow.com
来源:如何使用 jquery@stackoverflow.com打开选择输入
回答by zengabor
You can find a similar question here: How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?
您可以在这里找到一个类似的问题:如何以编程方式告诉 HTML SELECT 下拉(例如,由于鼠标悬停)?
I don't think there is a single solution that would work in every browser.
我认为没有一种解决方案适用于所有浏览器。
I can confirm that using document.createEvent()
and .dispatchEvent()
(as explained at the above link) works great in WebKit browsers (Safari, Chrome) but not in Firefox, Opera and IE.
我可以确认使用document.createEvent()
和.dispatchEvent()
(如上述链接所述)在 WebKit 浏览器(Safari、Chrome)中运行良好,但在 Firefox、Opera 和 IE 中不起作用。
However, you can try combining the different solutions listed there.
但是,您可以尝试组合此处列出的不同解决方案。
回答by Eduardo Lucio
I have a complete solution for this problem here Is it possible to use JS to open an HTML select to show its option list?. In this scheme the select can be opened correctly, easy, with all its functionality and preserving the page layout. That solution is safe, simple and compatible with Internet Explorer, FireFox and Chrome.
我在这里有一个完整的解决方案是否可以使用 JS 打开 HTML 选择以显示其选项列表?. 在此方案中,选择可以正确、轻松地打开,具有所有功能并保留页面布局。该解决方案安全、简单且与 Internet Explorer、FireFox 和 Chrome 兼容。
Thank's!
谢谢!
回答by Rajesh Paul
You can use the following script
您可以使用以下脚本
<script>
function(){
selectbox = $(select-selector)[0]
selectbox.size = selectbox.options.length;
}
</script>
回答by Jordan Ramstad
$(document).ready(function(){
$('#selId').on('click',function(){
//do stuff here
});
$('#selId').trigger('click');
});
This should work.
这应该有效。
Update:
更新:
$(document).ready(function(){
$('#selId').click(function(){
//do stuff here
});
$('#selId').click();
});
Very similar to the other answer, but that should do it also rather then "click" you can try "focus"
与其他答案非常相似,但这也应该这样做,而不是“单击”您可以尝试“聚焦”