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

У меня есть раскрывающийся список, который инициализируется одним единственным значением. Когда пользователь нажимает на него, один элемент удаляется и добавляется новый элемент с надписью "загрузка", затем на сервер выдается вызов AJAX, а когда возвращается, новые значения добавляются в элемент управления.

проблема в том, что элемент управления остается открытым во время обновления, и я хотел бы его закрыть.

вот пример:http://jsfiddle.net/vtortola/CGuBk/2/

в пример AJAX не получает данные, вероятно, потому, что что-то не так я делаю при вызове api jsfiddle, но он показывает, как выберите остается открытым во время обновления.

Я хочу знать, как закрыть раскрывающийся список программно без фокуса в другом входе.

Ура.

25
html html-select javascript jquery

9 ответов

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

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

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

лучшим решением было бы заменить раскрывающийся список на чистый HTML и скрыть это при необходимости с простым

12

просто добавьте этот конец строки вашего закрытия в 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);

        })
        ......
    }):

демо

12

после...

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

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

$select.blur();
6

Я думаю, все, что вам нужно сделать, это нацелиться на что-то еще или я должен сказать, потерять фокус на select (размыть его)

<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

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

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

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

и использовать его таким образом:

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

Решение 1 Я нашел очень простое решение.

select.style.display = "none";
setTimeout(function () {
    select.style.display = "block";
}, 10);

этот элемент hide в 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 элемента, затем приносит якорь перед выбором. Якорь есть ли для восстановления select в той же позиции в 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();

пример

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

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

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

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

0

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

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

0