it-swarm.com.de

Schließen Sie eine SELECT-Dropdown-Liste programmgesteuert mit Javascript/jQuery

Ich habe eine Dropdown-Liste, die mit einem einzigen Wert initialisiert wird. Wenn der Benutzer darauf klickt, wird das einzelne Element entfernt und ein neues Element mit dem Hinweis "Loading" wird hinzugefügt. Anschließend wird ein AJAX -Aufruf an den Server ausgegeben, und bei der Rückkehr werden die neuen Werte zum Steuerelement hinzugefügt.

Das Problem ist, dass das Steuerelement während der Aktualisierung geöffnet bleibt, und ich möchte es schließen.

Dies ist ein Beispiel: http://jsfiddle.net/vtortola/CGuBk/2/

AJAX des Beispiels erhält wahrscheinlich keine Daten, weil ich etwas falsch mache, wenn ich die jsfiddle-API anrufe, aber es zeigt, wie SELECT während des Updates geöffnet bleibt.

Ich möchte wissen, wie man die Dropdown-Liste programmgesteuert schließt, ohne den Fokus auf eine andere Eingabe zu legen.

26
vtortola

Ich bin mir bei niemandem sicher, aber ich verwende den neuesten stabilen Build von Chrome und keine der anderen Antworten, die .blur() betreffen, funktioniert für mich.

Diese Frage stellt die Umkehrung: Programmgesteuert ein Dropdown-Menü öffnen

Die Schlussfolgerung, die anscheinend erzielt wurde, ist, dass dies aufgrund der Art, wie der Browser Feldelementklicks verarbeitet, nicht möglich ist.

Eine bessere Lösung wäre, die Dropdown-Liste durch eine reine HTML-Datei zu ersetzen und sie bei Bedarf mit einem einfachen .hide()-Befehl auszublenden.

12
Death

Fügen Sie einfach dieses Ende der Zeile innerhalb von click hinzu.

$(this).blur();  

So wird es aussehen

$select.click(function(e){

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

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

DEMO

HAH! Wenn wir ein Problem mit Chrome neuer Version haben, dann:

Nimm eine falsche select wie folgt:

<select class="fake" style="display: none">
    <option value="-1">Loading</option>
</select>

und mache etwas wie:

$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

12
thecodeparadox

Nach dem...

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

Versuchen Sie das Hinzufügen ...

$select.blur();
6
freefaller

Ich denke, alles, was Sie tun müssen, ist, etwas anderes anzuvisieren, oder sollte ich sagen, verlieren Sie den Fokus auf die Auswahl (verwischen Sie sie).

<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
Huangism

Ich weiß, dass dies eine alte Frage ist und bereits eine Antwort hat, aber ich denke, die folgende Lösung kann ein fairer Weg sein, um das Ziel zu erreichen. 

Sie können das Schließen des select simulieren, indem Sie es erneut rendern. In jQuery können Sie ein einfaches Plugin implementieren, um dies zu erreichen:

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

und benutze es so:

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

LÖSUNG 1 Ich habe eine sehr einfache Lösung gefunden.

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

Dieses Hide-Element in DOM führt dazu, dass das Dropdown-Menü geschlossen wird und dann mit einer Verzögerung von 10 ms (ohne Verzögerung funktioniert es nicht) in DOM zurückgegeben wird.

LÖSUNG 2: Etwas komplizierter, aber ohne Verzögerung wird das Element vollständig aus dem DOM entfernt und sofort zurückgegeben.

var parent = select.parentElement;
var anchor = document.createElement("div");
parent.insertBefore(anchor, select);
parent.removeChild(select);
parent.insertBefore(select, anchor);
parent.removeChild(anchor);

Dies speichert das Element des Elements und bringt den Anker vor dem Auswählen. Anchor steht dort zum Wiederherstellen von select an derselben Position als zuvor. Natürlich kann es implementiert werden, um ein Element auswählen zu können.

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

und dann einfach anrufen

select.closeDropdown();

Beispiel

1
Misaz

Die einfachste Möglichkeit, ein ausgewähltes Element zu schließen, besteht darin, es vorübergehend zu deaktivieren:

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

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

Falls irgendjemand sonst Angular2 benutzt, war die Lösung, die dort für mich funktionierte, ein (Fokus-) Ereignis, das $($event.srcElement).attr("disabled","disabled"); aufruft

Dann füge ich ein Timeout hinzu, um das Element wieder zu aktivieren, wenn es wieder aktiv werden soll.

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

Alte Post, die ich kenne, aber ich habe eine sehr einfache Lösung.

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

Das Auswahlelement wird ausgeblendet, wenn Sie auf ein Element in der Liste klicken. 

0
user3619165