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

Close a SELECT dropdown list programmatically with Javascript/jQuery

本文关键字：方式关 SELECT 下拉列表 编程 Javascript jQuery 使用      更新时间：2023-09-26

我有一个用一个值初始化的下拉列表。当用户单击它时，将删除单个元素并添加一个表示"正在加载"的新元素，然后向服务器发出 AJAX 调用，并在返回时将新值添加到控件中。

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

这是一个示例：http://jsfiddle.net/vtortola/CGuBk/2/

该示例的 AJAX 没有获取数据可能是因为我在调用 jsfiddle api 时出错了，但它显示了SELECT在更新期间如何保持打开状态。

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

我不确定其他人，但我使用的是 Chrome 的最新稳定版本，其他涉及.blur()答案都不适合我。

这个问题问的是相反的问题：以编程方式打开下拉菜单

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

更好的解决方案是用纯 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);

这会存储元素的参数，然后在选择之前引入锚点。锚点用于在 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');
相关文章：