Закрытие выпадающего списка SELECT программно с помощью Javascript/jQuery

Ответ 1

Я не уверен ни о ком другом, но я использую последнюю стабильную сборку Chrome, и ни один из других ответов с участием .blur() не работает для меня.

Этот вопрос задает обратное: Программно открыть раскрывающееся меню

Вывод, который, по-видимому, был получен, заключается в том, что это невозможно из-за того, как браузер обрабатывает клики элемента поля.

Лучшим решением было бы заменить раскрывающийся список на чистый HTML-код и скрыть его при необходимости с помощью простой команды .hide().

Ответ 2

Просто добавьте конец этой строки в конец click.

$(this).blur();  

Итак, это будет выглядеть как

$select.click(function(e){

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

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

DEMO

HAH! Если у нас возникла проблема с новой версией 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

Ответ 3

После...

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

Попробуйте добавить...

$select.blur();

Ответ 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();    
});

Ответ 5

Я знаю, что это старый вопрос и уже есть ответ, но я думаю, что следующее решение может быть справедливым способом достижения цели.

Вы можете имитировать закрытие выбора путем повторного его рендеринга. В jQuery вы можете реализовать простой плагин, чтобы достичь этого:

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

и использовать его следующим образом:

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

Ответ 6

РЕШЕНИЕ 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 элемента, а затем выгружается якорь перед выбором. Якорь там для восстановления выбора в том же положении в DOM, а затем. Конечно, он может быть реализован для функции select 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();

Пример

Ответ 7

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

Ответ 8

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

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

Это приведет к смене элемента select, если вы нажмете на любой элемент в списке.

Ответ 9

В случае, если кто-то другой использует Angular2, решение, которое работало там для меня, заключалось в том, чтобы добавить событие (фокус), которое вызывает $($event.srcElement).attr("disabled","disabled");

Затем я добавляю тайм-аут для повторного включения элемента, когда я хочу, чтобы он снова стал активным.

Ответ 10

Самый простой способ закрыть выбранный элемент - это временно отключить его:

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

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