jQuery 展开选择下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16056666/
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
Expand select dropdown
提问by user2289967
I am trying to expand a select dropdown upon clicking on a link.
我试图在单击链接时展开选择下拉列表。
<button type="button" id="btn">Click Me!</button>
<select id='sel' name='sel'>
<option>item 1</option>
<option>item 2</option>
<option>item 3</option>
<option>item 4</option>
</select>
And the Javescript is as follows.
Javescript 如下。
$(document).ready(function() {
$("#btn").click(function() {
$("#sel").trigger('click');
});
});
Any Ideas...??
有任何想法吗...？？
采纳答案by Alepac
You cannot mimic native browser event using .trigger. Looking at this linkto the jQuery tutorial it seems you need .simulatemethod from jquery.simulate.js. Moreover the open event of the dropdown box is given by mousedownnot click.
您不能使用.trigger. 查看jQuery 教程的链接，您似乎需要jquery.simulate.js 中的.simulate方法。此外，下拉框的打开事件由not给出。mousedownclick
Update:So the code become:
更新：所以代码变成：
$(document).ready(function() {
$("#btn").click(function() {
$("#sel").simulate('mousedown');
});
});
回答by Jefferson Reis
//https://stackoverflow.com/a/10844589/7926961
function openDropdown(elementId) {
function down() {
var pos = $(this).offset(); // remember position
var len = $(this).find("option").length;
if(len > 20) {
len = 20;
}
$(this).css("position", "absolute");
$(this).css("zIndex", 9999);
$(this).offset(pos); // reset position
$(this).attr("size", len); // open dropdown
$(this).unbind("focus", down);
$(this).focus();
}
function up() {
$(this).css("position", "static");
$(this).attr("size", "1"); // close dropdown
$(this).unbind("change", up);
$(this).focus();
}
$("#" + elementId).focus(down).blur(up).focus();
}
DEMO:
演示：
回答by S.TOF
I thinks find to solve this problem i have test in ie, FF, chrome and Edge.
我认为找到解决这个问题的方法，我在 IE、FF、chrome 和 Edge 中进行了测试。
HTML
HTML
<select id="selecttest">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">free</option>
<option value="4">four</option>
<option value="5">five</option>
<option value="6">six</option>
<option value="7">seven</option>
<option value="8">height</option>
<option value="9">nine</option>
<option value="10">ten</option>
<option value="11">eleven</option>
<option value="12">twelve</option>
<option value="13">thirdteen</option>
</select>
<input type="button" value="testing" id="MyButton"/>
JQUERY
查询
$('#MyButton').on("click",function(){
$("#selecttest").attr("size", 8);
$("#selecttest").css("position","fixed");
$('#MyButton').css("margin-left", $("#selecttest").width() + 5);});
$('#selecttest').on("change",function(){
$("#selecttest").attr("size", 1);});
回答by user2282362
try this
尝试这个
$(document).ready(function() {
$("#btn").click(function() {
document.getElementById('sel').size='2'
});
});
