javascript 仅在单击下拉列表时填充下拉列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13461016/
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
Populate Dropdown only if dropdown is clicked
提问by KingKongFrog
I can't manage to find out how to initiate a click event by a user clicking on a dropdown. I want to populate the dropdown ONLY if the user clicks the dropdown which will be rare. In addition, it depends on several other values selected on the page. So basically, how do I fire off an event if a user just simply clicks on the dropdown to see the options.
我无法找出如何通过用户单击下拉列表来启动单击事件。我只想在用户点击下拉菜单时填充下拉菜单，这将是罕见的。此外，它还取决于页面上选择的其他几个值。所以基本上，如果用户只是简单地单击下拉列表以查看选项，我该如何触发事件。
I've tried, $('select').clickbut to no avail.
我已经尝试过了，$('select').click但无济于事。
It works if you don't have any options. But if there are current options, no luck.
如果您没有任何选择，它会起作用。但如果有当前的选择，那就没有运气了。
回答by Stefan
Try using the focusevent instead, that way the selectwill be populated even when targeted using the keyboard.
尝试改用focus事件，这样select即使在使用键盘定位时也会填充。
$('select').on('focus', function() {
var $this = $(this);
if ($this.children().length == 1) {
$this.append('<option value="1">1</option><option value="2">2</option>');
}
});?
View simple demo.
查看简单演示。
UPDATE
更新
Here is a new versionthat uses unbindto only fire the event handler once. This way you are able to use your alertwithout adding any optionelements to change the outcome of the condition as the previous solution required.
这是一个新版本，它使用unbind只触发一次事件处理程序。通过这种方式，您alert无需添加任何option元素即可使用您的解决方案来更改条件的结果，就像先前的解决方案所需的那样。
$('select').on('focus', function() {
var $this = $(this);
// run your alert here if it′s necessary
alert('Focused for the first time :)');
// add the new option elements
$this.append('<option value="1">1</option><option value="2">2</option>');
// unbind the event to prevent it from being triggered again
$this.unbind('focus');
});?
Hope that is what you are looking for.
希望这就是你要找的。
回答by Diego
It should work. HereI've done it and its working.
它应该工作。在这里，我已经完成了它及其工作。
$("select").on("click", function() {
$(this).append("<option>1</option><option>2</option>");
});
Updated: http://jsfiddle.net/paska/bGTug/2/
更新：http: //jsfiddle.net/paska/bGTug/2/
New code:
新代码：
var loaded = false;
$("select").on("click", function() {
if (loaded)
return;
$(this).append("<option>1</option><option>2</option>");
loaded = true;
});
回答by Patrik Simons
Getting the dropdown to automatically open after the click is trickier:
点击后自动打开下拉菜单比较棘手：
// Mousedown is used so IE works
$('#select_id').on('focus mousedown', function (e) {
var data;
$(this).off('focus mousedown');
$.ajax({async: false,
type: 'GET',
url: 'url that returns the options',
success: function (d) { data = d; }
});
$(this).find('option').remove().end().append(data);
// Prevent IE hang by waiting awhile
var t = new Date().getTime(); while(new Date().getTime() < t + 200) {}
return true;
});
