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

时间:2012-06-01 14:12:05

标签: javascript jquery html html-select

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

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

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

示例的AJAX可能不会获取数据,因为我在调用jsfiddle api时遇到了错误,但它显示了 SELECT 在打开期间是如何打开的更新

我想知道如何以编程方式关闭下拉列表而不关注其他输入。

10 个答案:

答案 0 :(得分:12)

只需在click内添加此行结尾。

$(this).blur();  

所以它看起来像

$select.click(function(e){

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

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

DEMO

哈哈!如果我们遇到 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);

        })
        ......
    }):

<强> DEMO

答案 1 :(得分:12)

我不确定其他人,但我使用的是Chrome的最新稳定版本,而.blur()的其他任何答案都不适用于我。

这个问题反过来说:Programmatically open a drop-down menu

似乎获得的结论是,由于浏览器处理字段元素点击的方式,它无法实现。

更好的解决方案是使用纯HTML替换下拉列表,并在需要时使用简单的.hide()命令隐藏它。

答案 2 :(得分:6)

在...

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

尝试添加...

$select.blur();

答案 3 :(得分:5)

我认为您需要做的就是瞄准别的东西,或者我应该说要专注于选择(模糊它)

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

答案 4 :(得分:2)

我知道这是一个老问题并且已经有了答案,但我认为以下解决方案可以成为实现目标的公平方式。

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

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

并以这种方式使用它:

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

答案 5 :(得分:1)

解决方案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);

这会存储元素的parrent,然后在选择之前带锚。 Anchor用于恢复在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();

Example

答案 6 :(得分:0)

$('.select').on('change', function () {
    $(this).click();
});

答案 7 :(得分:0)

旧帖我知道,但我有一个非常简单的解决方案。

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

如果单击列表中的任何项,那将会折叠select元素。

答案 8 :(得分:0)

如果其他人使用Angular2,那对我有用的解决方案是添加一个调用$($event.srcElement).attr("disabled","disabled");

的(焦点)事件

然后,当我希望它再次变为活动状态时,我会添加一个超时来重新启用该元素。

答案 9 :(得分:0)

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

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

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