我有一个用一个值初始化的下拉菜单。当用户单击它时，单个元素被移除并添加一个新元素，显示“正在加载”，然后向服务器发出 AJAX 调用，当返回时，新值被添加到控件中。
问题是控件在更新时保持打开状态，我想关闭它。
这是一个例子：http://jsfiddle.net/vtortola/CGuBk/2/
示例的 AJAX 未获取数据可能是因为我在调用 jsfiddle api 时做错了什么，但它显示了 SELECT 在更新期间如何保持打开状态。
我想知道如何在不关注另一个输入的情况下以编程方式关闭下拉列表。
【问题讨论】：
标签： javascript jquery html html-select
我不确定其他人，但我使用的是最新的稳定版本的 Chrome，而涉及 .blur() 的其他答案都不适用于我。
本题反问：Programmatically open a drop-down menu
似乎得到的结论是，由于浏览器处理字段元素点击的方式，这是不可能的。
更好的解决方案是用纯 HTML 替换下拉菜单，并在需要时使用简单的.hide() 命令将其隐藏。
【讨论】：
只需在click 中添加此行结束即可。
$(this).blur();
它看起来像
$select.click(function(e){
$select.html('<option value="-1">Loading</option>');
$(this).blur();
......
...
});
哈哈！如果我们对 Chrome 新版本有疑问，那么：
取一个假的select，如下所示：
<select class="fake" style="display: none">
<option value="-1">Loading</option>
</select>
然后做一些类似的事情：
$select.click(function(e) {
$(this).hide(0); // hide current select box
//$select.html('<option value="-1">Loading</option>');
$('select.fake').show(0); // show the fake slide
$.ajax({
// your code
}).done(function(data) {
$('select.fake').hide(0);
$select.show(0);
})
......
}):
【讨论】：
之后……
$select.html('<option value="-1">Loading</option>');
尝试添加...
$select.blur();
【讨论】：
我认为你需要做的就是瞄准其他东西，或者我应该说失去对选择的关注（模糊它）
<select>
<option value="0">Initial Value</option>
</select>
var $select = $('select');
$select.click(function(e){
$select.html('<option value="-1">Loading</option>');
$.ajax({
url: '/echo/json/',
method:'post',
dataType: "json",
contentType: "application/json; charset=utf-8",
data: { json: JSON.stringify([1, 2, 3]), delay:1 }
}).done(function(data){
$.each($.map(data, function (item, i) {
return "<option value='" + item +"' >" + item + "</option>";
}), function (i, item) {
$element.append(item);
});
}).fail(function(){
alert('error');
});
e.preventDefault();
e.stopPropagation();
$(this).blur();
});
【讨论】：
我知道这是一个老问题，并且已经有了答案，但我认为以下解决方案可能是实现目标的公平方式。
您可以通过重新渲染来模拟选择的关闭。在 jQuery 中，您可以实现一个简单的插件来实现：
$.fn.closeSelect = function() {
if($(this).is("select")){
var fakeSelect = $(this).clone();
$(this).replaceWith(fakeSelect);
}
};
并以这种方式使用它：
$("#mySelect").closeSelect();
【讨论】：
解决方案 1 我找到了非常简单的解决方案。
select.style.display = "none";
setTimeout(function () {
select.style.display = "block";
}, 10);
这个隐藏在 DOM 中的元素，这导致下拉菜单将被关闭，然后延迟 10 毫秒（没有延迟它不起作用）将其返回到 DOM。
解决方案 2：稍微复杂一点但没有延迟的是从 DOM 中完全删除元素，然后立即将其返回。
var parent = select.parentElement;
var anchor = document.createElement("div");
parent.insertBefore(anchor, select);
parent.removeChild(select);
parent.insertBefore(select, anchor);
parent.removeChild(anchor);
这会存储元素的父级，然后在选择之前带上锚。 Anchor 用于在 DOM 之前的相同位置恢复选择。当然也可以实现选择元素的功能。
HTMLSelectElement.prototype.closeDropdown = function () {
var parent = this.parentElement;
var anchor = document.createElement("div");
parent.insertBefore(anchor, this);
parent.removeChild(this);
parent.insertBefore(this, anchor);
parent.removeChild(anchor);
}
然后打电话
select.closeDropdown();
【讨论】：
$('.select').on('change', function () {
$(this).click();
});
【讨论】：
我知道的旧帖子，但我有一个非常简单的解决方案。
$(someSelectElement).on('change', function(e) {
e.target.size = 0
}
如果您单击列表中的任何项目，这将折叠选择元素。
【讨论】：
如果其他人在使用 Angular2，对我有用的解决方案是添加一个调用 $($event.srcElement).attr("disabled","disabled"); 的（焦点）事件
然后，当我希望元素再次变为活动状态时，我会添加一个超时以重新启用该元素。
【讨论】：
我发现关闭选定元素的最简单方法是暂时禁用它：
$selectElement.attr('disabled', true);
setTimeout(() => {
$selectElement.attr('disabled', false);
}, 4);
【讨论】：
请试试这个，为我工作：
$("#mySelect").dropdown('toggle');
【讨论】：