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

Question

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

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

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

该示例的AJAX可能不会获取数据,因为我在调用jsfiddle api时遇到了错误,但它显示了SELECT更新期间保持打开状态的方式.

我想知道如何以编程方式关闭下拉列表而不关注另一个输入.

Answer 1

只需在结尾处添加此行结尾即可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

Answer 2

我不确定其他人,但我正在使用最新的稳定版本的Chrome,而其他任何答案都不涉及.blur()我的工作.

这个问题反过来说:以编程方式打开一个下拉菜单

似乎获得的结论是,由于浏览器处理字段元素点击的方式,它是不可能的.

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

Answer 3

后...

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

尝试添加...

$select.blur();

Answer 4

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

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