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

Question

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 hinzugefügt, das "Laden" sagt, dann wird ein AJAX-Aufruf an den Server ausgegeben und bei der Rückkehr werden die neuen Werte dem 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/

Die AJAX des Beispiels keine Daten bekommt wahrscheinlich, weil etwas falsch, ich tue, wenn die jsfiddle api nennen, aber es zeigt, wie die während der Aktualisierung geöffnet bleibt SELECT.

Ich möchte wissen, wie Sie die Dropdown-Liste programmatisch ohne Fokus in einer anderen Eingabe schließen.

Prost.

Answer 1

Ich bin nicht sicher über jemand anderen, aber ich verwende die neueste stabile Version von Chrome, und keine der anderen Antworten mit funktionieren für mich.

Diese Frage stellt die inverse: Programmatically open a drop-down menu

Die Schlussfolgerung, die erhalten zu sein schien, ist, dass es aufgrund der Art und Weise nicht möglich ist, das Browserfeld Element klickt behandelt.

Eine bessere Lösung wäre, das Dropdown-Menü durch ein reines HTML zu ersetzen und es bei Bedarf mit einem einfachen .hide() Befehl auszublenden.

Answer 2

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

$(this).blur(); 

So wird es aussehen wie

$select.click(function(e){ 

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

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

DEMO

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

Nehmen Sie eine gefälschte select wie folgt vor:

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

und so 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

Answer 3

Ich glaube, alles, was Sie ist Ziel etwas anderes tun müssen, oder sollte ich sagen verlieren Fokus auf die select (es verschwimmen)

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

Answer 4

Nach ...

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

Versuchen Hinzufügen ...

$select.blur(); 

Answer 5

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

Sie können das Schließen der Auswahl durch erneutes Rendern simulieren. In jQuery können Sie ein einfaches Plugin implementieren, das zu erreichen:

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

und es auf diese Weise verwenden:

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

Answer 6

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

Answer 7

Alte Post Ich weiß, aber ich habe eine sehr einfache Lösung.

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

Dadurch wird das Element select ausgeblendet, wenn Sie auf ein Element in der Liste klicken.

Answer 8

Falls jemand da draußen mit Angular2, die Lösung, die für mich da arbeitete, war ein (Fokus) Ereignis hinzufügen, die $($event.srcElement).attr("disabled","disabled");

ich dann fügen Sie ein Timeout ruft das Element wieder zu aktivieren, wenn ich will es wird wieder aktiv.

Answer 9

LÖSUNG 1 Ich fand sehr einfache Lösung.

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

Dieses hide Element in DOM, diese Ursache, die geschlossen wird Dropdown wird und dann mit 10 ms Verzögerung (ohne Verzögerung funktioniert es nicht) es in DOM zurückzukehren.

LÖSUNG 2: Etwas komplizierter, aber ohne Verzögerung, ist es, das Element vollständig aus dem DOM zu entfernen und es dann sofort zurückzusenden.

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 Parrent Element, dann bringen Anker vor Auswahl. Anchor ist dort zum Wiederherstellen von select an derselben Position in DOM davor. Natürlich kann es implementiert werden, um das Auswahlelement zu bedienen.

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 rufen Sie einfach

select.closeDropdown(); 

Example