Программно закрыть раскрывающийся список SELECT с помощью Javascript / jQuery

Я не уверен ни в ком еще, но я использую последнюю стабильную сборку 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, что и раньше. Конечно, это может быть реализовано для функции select element.

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

Пример

Старый пост я знаю, но у меня есть очень простое решение.

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