使用Javascript/jQuery以编程方式关闭选择下拉列表

我有一个下拉列表，它是用一个值初始化的。当用户单击它时，单个元素被删除，并添加一个新元素，称为“Loading”，然后向服务器发出AJAX调用，当返回时，新值被添加到控件中

问题是控件在更新时保持打开状态，我想关闭它

这是一个例子：

示例中的AJAX没有获取数据，可能是因为调用JSFIDLE api时出错了，但它显示了

SELECT

在更新过程中是如何保持打开状态的

---

我想知道如何以编程方式关闭下拉列表，而不在另一个输入中使用焦点。

只需在

中单击
将此行添加到关闭的末尾即可

$(this).blur();  

所以看起来像

$select.click(function(e){

    $select.html('<option value="-1">Loading</option>');

    $(this).blur();
    ......
    ...
});

然后做一些类似的事情：

$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.点击（函数（e）{
$（this）.hide（0）；//隐藏当前选择框
//$select.html（'load'）；
$（'select.fake'）.show（0）；//显示假幻灯片
$.ajax({
//你的代码
}).完成（功能（数据）{
$（'select.false'）.hide（0）；
$select.show（0）；
})
......
}):

我想你所需要做的就是瞄准其他目标，或者我应该说失去对选择的关注（模糊它）


初始值
变量$select=$（'select'）；
$select。单击（功能（e）{
$select.html（'load'）；
$.ajax({
url:“/echo/json/”，
方法：'post'，
数据类型：“json”，
contentType:“应用程序/json；字符集=utf-8”，
数据：{json:json.stringify（[1,2,3]），延迟：1}
}).完成（功能（数据）{
$.each（$.map）（数据、功能（项，i）{
返回“+项目+”；
})，功能（i，项目）{
$element.append（项目）；
});
}).fail（函数（）{
警报（“错误”）；
});
e、 预防默认值（）；
e、 停止传播（）；
$（this.blur（）；
});
在

$select.html('<option value="-1">Loading</option>');

我不确定是否还有其他人，但我使用的是最新稳定的Chrome版本，其他涉及
.blur（）
的答案都不适合我

这个问题的答案正好相反：

似乎得出的结论是，由于浏览器处理字段元素单击的方式，这是不可能的

更好的解决方案是用纯HTML替换下拉列表，并在需要时使用简单的
.hide（）
命令将其隐藏。
我知道这是一个老问题，并且已经有了答案，但我认为以下解决方案可以公平地实现目标

可以通过重新渲染来模拟选择的闭合。在jQuery中，您可以实现一个简单的插件来实现：

$.fn.closeSelect = function() {
    if($(this).is("select")){
        var fakeSelect = $(this).clone();
        $(this).replaceWith(fakeSelect);
    }
};

并以这种方式使用它：

$("#mySelect").closeSelect();

以前的帖子我知道，但我有一个非常简单的解决方案

$(someSelectElement).on('change', function(e) {
    e.target.size = 0    
}

select.style.display = "none";
setTimeout(function () {
    select.style.display = "block";
}, 10);

如果单击列表中的任何项目，将折叠select元素
 如果其他人在使用Angular2，我的解决方案是添加一个（焦点）事件，调用
$（$event.srcElement）.attr（“disabled”，“disabled”）

然后，当我希望元素再次激活时，我会添加一个超时以重新启用该元素。
解决方案1
我找到了非常简单的解决办法

$(someSelectElement).on('change', function(e) {
    e.target.size = 0    
}

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);

这将存储元素的部分，然后在选择之前带上锚点。锚点用于将select恢复到DOM中与之前相同的位置。当然，它可以实现为函数select元素

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();

我发现关闭选定元素的最简单方法是暂时禁用它：

$selectElement.attr('disabled', true);

setTimeout(() => {
   $selectElement.attr('disabled', false);
}, 4);

+1首先回答，并进行演示！如果目的是关闭下拉列表，那么这在Chrome 19（最新版本）中不起作用，因此不应该依赖它。因此，在最新版本的Chrome中没有办法：（@vtortola现在的答案是正确的。更改文本框时，我会打开一个“提示”框。如果在单击“选择”时发生更改，我现在可以通过在提示之前隐藏选择并在提示之后再次显示来避免出现令人不安的下拉列表。visibleselects=$（'select:visible'）.hide（）；…visibleselects.show（）；
select.closeDropdown();

$selectElement.attr('disabled', true);

setTimeout(() => {
   $selectElement.attr('disabled', false);
}, 4);