我有一个用一个值初始化的下拉列表。当用户单击它时，将删除单个元素并添加一个新元素，显示“正在加载”，然后向服务器发出 AJAX 调用，并在返回时将新值添加到控件中。
问题是控件在更新时保持打开状态，我想关闭它。
这是一个例子：http: //jsfiddle.net/vtortola/CGuBk/2/
该示例的 AJAX 未获取数据可能是因为我在调用 jsfiddle api 时做错了什么，但它显示了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
}
如果您单击列表中的任何项目，这将折叠选择元素。
我发现关闭选定元素的最简单方法是暂时禁用它：
$selectElement.attr('disabled', true);
setTimeout(() => {
$selectElement.attr('disabled', false);
}, 4);
万一其他人在使用 Angular2，对我有用的解决方案是添加一个（焦点）事件，该事件调用$($event.srcElement).attr("disabled","disabled");
然后，当我希望它再次变为活动状态时，我添加了一个超时以重新启用该元素。
请试试这个，为我工作：
$("#mySelect").dropdown('toggle');