使用 jQuery 模拟单击选择元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13234971/
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
Simulate click on select element with jQuery
提问by Morteza
I use this code for simulate clickon selectelement:
我用这个代码模拟click的select元素：
$(function(){
$("#click").click(function(){
$("#ts").click();
//$("#ts").trigger("click");
});
});
and HTML code is:
和 HTML 代码是：
<select id="ts">
<option value="1">1</option>
<option value="2">Lorem ipsum dolor s.</option>
<option value="3">3</option>
</select>
<input type="button" id="click" value="Click"/>
I test clickand triggerbut both not work.
我测试click，trigger但都不起作用。
Thanks for any help.
谢谢你的帮助。
回答by Oscar Jara
Well, you cannot attach clickevent to html selectbut you can do this tricky thing...
好吧，你不能将click事件附加到 htmlselect但你可以做这个棘手的事情......
Take a look at here:
看看这里：
Live DEMO:
现场演示：
回答by A. Wolff
This is the best cross browser method i think you can get. Tested on Safari, Firefox, Chrome and IE. For Chrome, Oscar Jara's answer is the way to go.(update: 10-13-2016)
这是我认为您可以获得的最佳跨浏览器方法。在 Safari、Firefox、Chrome 和 IE 上测试。对于 Chrome，Oscar Jara 的答案是要走的路。（更新：10-13-2016）
$(function() {
$("#click").on('click', function() {
var $target = $("#ts");
var $clone = $target.clone().removeAttr('id');
$clone.val($target.val()).css({
overflow: "auto",
position: 'absolute',
'z-index': 999,
left: $target.offset().left,
top: $target.offset().top + $target.outerHeight(),
width: $target.outerWidth()
}).attr('size', $clone.find('option').length > 10 ? 10 : $clone.find('option').length).change(function() {
$target.val($clone.val());
}).on('click blur keypress',function(e) {
if(e.type !== "keypress" || e.which === 13)
$(this).remove();
});
$('body').append($clone);
$clone.focus();
});
});
See jsFiddle demo
回答by adeneo
This is as close as you'll get I think :
这与我想的一样接近：
$(function(){
$("#click").on('click', function(){
var s = $("#ts").attr('size')==1?5:1
$("#ts").attr('size', s);
});
$("#ts option").on({
click: function() {
$("#ts").attr('size', 1);
},
mouseenter: function() {
$(this).css({background: '#498BFC', color: '#fff'});
},
mouseleave: function() {
$(this).css({background: '#fff', color: '#000'});
}
});
});
回答by Paul Wand
I ended up setting the selected attribute on the option itself. Then triggering the change even on the select element.
我最终在选项本身上设置了 selected 属性。然后甚至在选择元素上触发更改。
回答by Vivien G.
I have a complex selectelement, fed by the answer given in a previous selectelement. Options are fed by AJAX, triggered by onchangeevents.
我有一个复杂的select元素，由前一个select元素中给出的答案提供。选项由 AJAX 提供，由onchange事件触发。
For my needs, to prefill answers with a "hidden magic event" that simulates user behavior (in an intensive testing way) I use the following jQuery code in "my magic event". It selects the option by its index :
为了满足我的需要，为了使用模拟用户行为的“隐藏魔法事件”（以密集测试的方式）预先填写答案，我在“我的魔法事件”中使用了以下 jQuery 代码。它通过索引选择选项：
// Quick feed of my Car Form
document.getElementById('carbrand').selectedIndex = 30; // "PORSCHE"
document.getElementById('carbrand').onchange();
var timeoutID = window.setTimeout(function () {
document.getElementById('model').selectedIndex = 1; // "911"
document.getElementById('model').onchange();
var timeoutID = window.setTimeout(function () {
document.getElementById('energy').selectedIndex = 1; // "SUPER"
document.getElementById('energy').onchange();
} , 200);
} , 200);
Merci à https://stackoverflow.com/users/1324/paul-roubpour les corrections ;-)
谢谢 à https://stackoverflow.com/users/1324/paul-roub倾倒 les 更正;-)
回答by user2794181
little update(with toggle) for Oscar Jara variant
http://jsfiddle.net/mike_s/y5GhB/
toggleOscar Jara 变体http://jsfiddle.net/mike_s/y5GhB/ 的小更新（带有）
