Wie lösche ich alle Optionen in einem Dropdown-Feld?

152

Mein Code funktioniert im Internet Explorer, funktioniert jedoch nicht in Safari, Firefox und Opera. (große Überraschung)

document.getElementById("DropList").options.length=0;

Nach der Suche habe ich gelernt, dass es das ist length=0, was es nicht mag.
Ich habe es versucht ...options=nullund var clear=0; ...length=clearmit dem gleichen Ergebnis.

Ich mache dies mit mehreren Objekten gleichzeitig, also suche ich nach leichtem JS-Code.

Kirt
quelle
Um alle Optionen (!?) Zu zerstören und den Verlauf der ausgewählten Optionen des Browsers nach der Aktualisierungsseite zurückzusetzen, verwenden Sie die HTML- <option selected>Dateien ?? (Google hat uns hierher gebracht, aber es ist nicht hier) ... Siehe document.getElementById ("form1"). reset () echte Lösung.
Peter Krauss

Antworten:

34

Sie können Folgendes verwenden, um alle Elemente zu löschen.

var select = document.getElementById("DropList");
var length = select.options.length;
for (i = length-1; i >= 0; i--) {
  select.options[i] = null;
}
Nick Craver
quelle
14
MooTools hat auch empty(), also würden Sie tun$("DropList").empty();
Brian Koser
42
Dies scheint eine schlechte Idee zu sein - das Setzen der Elemente auf Null ist nicht dasselbe wie das Entfernen.
9
Es funktioniert auch nicht wie erwartet. Wenn ich diesen Code benutze, bleibt ein Objekt in der Dropdown-Liste.
gabrjan
9
Dieser Code könnte abstürzen. Der sicherste Weg, die Schleife in umgekehrter Reihenfolge auszuführen.
Kangkan
19
Überprüfen Sie die anderen Antworten, um dies besser zu tun.
Tim Cavanaugh
295

Um die Optionen eines HTML-Elements von zu entfernen select, können Sie die folgende remove()Methode verwenden:

function removeOptions(selectElement) {
   var i, L = selectElement.options.length - 1;
   for(i = L; i >= 0; i--) {
      selectElement.remove(i);
   }
}

// using the function:
removeOptions(document.getElementById('DropList'));

Es ist wichtig, die optionsrückwärts zu entfernen ; während die remove()Methode die optionsSammlung neu ordnet . Auf diese Weise ist garantiert, dass das zu entfernende Element noch vorhanden ist!

Fabiano
quelle
9
Prost auf das @Fabiano, dies entfernt tatsächlich die Elemente im Gegensatz zu anderen Vorschlägen.
Constanta
4
Der Schlüssel hier ist die Rückwärtsdurchquerung der Auswahlbox. Optionen Ich denke ... diese Lösung ist fehlgeschlagen, als ich die Vorwärtsdurchquerung versuchte
Scottysseus
7
Ja, dies schlägt fehl, da die Methode remove () das Array neu anordnet. Wenn Sie es rückwärts ausführen, wird sichergestellt, dass das zu entfernende Element vorhanden ist.
Fabiano
Hinzufügen von selectbox.options.length = 0; am Ende der Definition könnte es in allen Browsern perfekt machen.
Omkar Sirra
4
Einfacher Code ist während (selectEl.options.length) selectEl.options.remove (0)
MiF
126

Wenn Sie ein leichtes Skript wünschen, wählen Sie jQuery. In jQuery lautet die Lösung zum Entfernen aller Optionen wie folgt:

$("#droplist").empty();
Kangkan
quelle
46
Ich würde argumentieren, dass das Hinzufügen von jQuery das Gegenteil von "Leichtgewicht" ist, wenn for (a in select.options) { select.options.remove(0); }die Arbeit gut funktioniert.
Artog
7
Das hängt vom Kontext ab. In einer Webanwendung $("#droplist").empty();lohnt sich die Hinzufügung von jQuery aufgrund der Lesbarkeit von hundert Zeilen Typcode im Vergleich zu Tausenden von Zeilen Vanilla JS. Wenn es sich um Markup / Kosmetik für eine einfache Webseite handelt, sind Sie zu 100% korrekt.
Half_Duplex
3
@AdamIngmansson Ich finde es rätselhaft, wenn Leute die Verwendung von JQuery verunglimpfen. Ich würde eine solche Methode unter der Annahme anwenden, dass die Ingenieure hinter JQ alle möglichen Tests durchgeführt haben, um die besten, schnellsten und vor allem zuverlässigsten Mittel für eine bestimmte (Dienstprogramm-) Aufgabe zu finden. Der Sinn von JQ (oder einer guten Bibliothek) besteht darin, die alltäglichen Aufgaben zu übernehmen, damit Sie sich auf die interessanten Dinge konzentrieren können.
Mike Nagetier
2
@mikerodent Ich habe keinen Zweifel daran, dass die Funktion selbst von höchster Qualität und Leistung ist. Das Laden einer 86-KB-Datei (die komprimierte Bibliothek von Version 3.2.1) nur für diese kleine Funktion ist jedoch nicht "leicht" :) Wenn Sie viele der anderen Funktionen verwenden, lohnt es sich natürlich, jQuery zu verwenden. Es ist eine sehr gute Bibliothek
Artog
1
@ AdamIngmansson Fair genug! Aber ich nehme an, Sie wissen, dass die Datei JQ min.js so oft verwendet wird, dass sie sehr oft im Cache eines Browsers gefunden wird. In einem solchen Ausmaß, dass es wahrscheinlich ein gutes Argument dafür gibt, zu sagen: "Verwenden Sie JQ immer und betrachten Sie es NICHT als Teil einer Optimierungsphase, WENN sich dies wirklich als notwendig erweist." Möglicherweise kann es sich in bestimmten Kontexten (Telefon-Apps usw.) tatsächlich als notwendig erweisen. Dies liegt außerhalb meines dürftigen JS-Wissens.
Mike Nagetier
104

Wahrscheinlich nicht die sauberste Lösung, aber es ist definitiv einfacher als das Entfernen nacheinander:

document.getElementById("DropList").innerHTML = "";
Dmitry Shintyakov
quelle
Ich vermeide normalerweise innertHTML wie die Pest. Aber das macht die Dinge so viel einfacher, dass es mir wirklich gefällt.
Petersaints
Ich konnte das nicht zum Laufen bringen. Ich bin mir nicht sicher, warum die Auswahloptionen auf diese Weise nicht gelöscht werden.
MikaelL
@MikaelL, es ist nützlich, wenn Sie hinzufügen, in welchem ​​Browser es passiert. Und seine Version, wenn Sie sich erinnern können.
Benutzer
70

Dies ist der beste Weg:

function (comboBox) {
    while (comboBox.options.length > 0) {                
        comboBox.remove(0);
    }        
}
Rodrigo Longo
quelle
Das hat mich heute gerettet, weil der Mechanismus 'for () {selectbox.remove ()}' irgendwie nicht alle Optionen löscht. Vielen Dank.
Sonlexqt
4
etwas kürzer alswhile (comboBox.options.length) comboBox.remove(0);
EkriirkE
31

Dies ist ein kurzer Weg:

document.getElementById('mySelect').innerText = null

Eine Zeile, nein für, keine JQuery, einfach.

Feuerwehr 26
quelle
Nicht die kürzeste, siehe meine Antwort unten.
Benutzer
16
function removeOptions(obj) {
    while (obj.options.length) {
        obj.remove(0);
    }
}
Julio Garcia
quelle
1
Diese Lösung ist die einzige, die für mich funktioniert. Iceweasel 10.0.12 und Chrome 26.
David
16

Ich möchte darauf hinweisen, dass das Problem in der ursprünglichen Frage heute nicht mehr relevant ist. Und es gibt eine noch kürzere Version dieser Lösung:

selectElement.length = 0;

Ich habe getestet, dass beide Versionen in Firefox 52, Chrome 49, Opera 36, ​​Safari 5.1, IE 11, Edge 18, den neuesten Versionen von Chrome, Firefox, Samsung Internet und UC Browser unter Android, Safari auf iPhone 6S und Android 4.2 funktionieren. 2 Aktienbrowser. Ich denke, es ist sicher zu schließen, dass es absolut kompatibel mit jedem Gerät ist, das es derzeit gibt, daher empfehle ich diesen Ansatz.

Benutzer
quelle
11

Dies ist ein bisschen modernes und reines JavaScript

document.querySelectorAll('#selectId option').forEach(option => option.remove())

a_rahmanshah
quelle
1
Schnellster Code. Versuchen Sie zum Testen, etwa 250000 Optionen zu entfernen
Andrej
7

mit PrototypeJS :

$('yourSelect').select('option').invoke('remove');
EpokK
quelle
6

Wenn Sie JQuery verwenden und Ihr Auswahlsteuerelement die ID "DropList" hat, können Sie seine Optionen folgendermaßen entfernen:

$('#DropList option').remove();

Eigentlich funktioniert es bei mir mit jeder Optionsliste, wie z. B. Datenliste.

Ich hoffe es hilft.

norgematos
quelle
5
Eine gute Antwort sollte detaillierter sein. Der Leser hat möglicherweise keine Ahnung, dass Sie wahrscheinlich jQuery meinen.
Mifeet
5
@Mifeet Wenn der Benutzer keine Ahnung hat, was JQuery hier bedeutet, sollte er seine Karriere ändern
Emilio Gort
6

Beachten Sie, dass eine Auswahl kann haben beide
- optgroup &
- Optionen Kollektion
als .

So,

Methode 1

var selectElement = document.getElementById('myselectid');
selectElement.innerHTML = '';

Methode 2

var selectElement = document.getElementById('myselectid');
selectElement.textContent = '';

Ich habe getestet, beide funktionieren auf Chrome.
Ich mag die einfachere, altmodische Methode Nr. 1.

Manohar Reddy Poreddy
quelle
1
Dies ist die beste Antwort. Auch wenn Sie bereits einen Abfrageverweis auf die Auswahl haben:$select.html('')
the_nuts
5

Versuchen

document.getElementsByTagName("Option").length=0

Oder schauen Sie sich die Funktion removeChild () an.

Oder wenn Sie das jQuery-Framework verwenden.

$("DropList Option").each(function(){$(this).remove();});
Rasiermessersturm
quelle
4

Die Verwendung von JQuery ist eine schönere, kürzere und intelligentere Methode!

$('#selection_box_id').empty();
Sobin Sunny
quelle
1
Dies ist wirklich nur eine Wiederholung dieser bestehenden Antwort .
Pang
4

Dies kann verwendet werden, um Optionen zu löschen:

function clearDropDown(){
  var select = document.getElementById("DropList"),
      length = select.options.length;
  while(length--){
    select.remove(length);
  }
}
<select id="DropList" >
  <option>option_1</option>
  <option>option_2</option>
  <option>option_3</option>
  <option>option_4</option>
  <option>option_5</option>
</select>
<button onclick="clearDropDown()">clear list</button>

Vichu
quelle
3

Gehe rückwärts. Grund ist, dass die Größe nach jedem Entfernen abnimmt.

for (i = (len-1); i > -1; i--) {
    document.getElementById("elementId").remove(i);
}
Dinesh Khetarpal
quelle
3
var select = document.getElementById("DropList");
var length = select.options.length;
for (i = 0; i < length; i++) {
  select.options[i].remove();
}

Hoffe, dieser Code wird Ihnen helfen

Nitika Chopra
quelle
2

Ich denke das ist das beste Sol. ist

 $ ("# myselectid"). html (''); 

Ossama Zakaria
quelle
2

Die einfachsten Lösungen sind die besten, Sie brauchen also nur:

var list = document.getElementById('list');
while (list.firstChild) {
    list.removeChild(list.firstChild);
}
<select id="list">
  <option value="0">0</option>
  <option value="1">1</option>
</select>

nitka.pawel
quelle
2

Die Elemente sollten in umgekehrter Reihenfolge entfernt werden, da sonst ein Fehler verursacht wird. Außerdem empfehle ich nicht, einfach die Werte auf zu setzen null, da dies zu unerwartetem Verhalten führen kann.

var select = document.getElementById("myselect");
for (var i = select.options.length - 1 ; i >= 0 ; i--)
    select.remove(i);

Oder wenn Sie es vorziehen, können Sie es zu einer Funktion machen:

function clearOptions(id)
{
    var select = document.getElementById(id);
    for (var i = select.options.length - 1 ; i >= 0 ; i--)
        select.remove(i);
}
clearOptions("myselect");
Dan Bray
quelle
1
var select = document.getElementById('/*id attribute of your select here*/');
for (var option in select){
    select.remove(option);
}
kyllo
quelle
1

Der Code der obigen Antwort muss geringfügig geändert werden, um die vollständige Liste zu entfernen. Überprüfen Sie diesen Code.

var select = document.getElementById("DropList");
var length = select.options.length;
for (i = 0; i < length;) {
  select.options[i] = null;
  length = select.options.length;
}

Aktualisieren Sie die Länge und es werden alle Daten aus der Dropdown-Liste entfernt. Hoffe das wird jemandem helfen.

Kein Name
quelle
Netter Zusatz - war für einen Moment ratlos, warum nicht jedes Mal alle Optionen entfernt wurden.
Ralpharoo
0
while(document.getElementById("DropList").childNodes.length>0) 
{
    document.getElementById("DropList").removeChild(document.getElementById("DropList").childNodes[0]);
}
user1910893
quelle
0

Wenn Sie IE unterstützen müssen und mehr als 100 Elemente in Ihrer Auswahlliste haben, empfehle ich dringend, die Auswahl durch eine Funktion wie die folgende zu ersetzen:

function clearOptions(select) {
    var selectParentNode = select.parentNode;
    var newSelect = select.cloneNode(false); // Make a shallow copy
    selectParentNode.replaceChild(newSelect, select);
    return newSelect;
}

Der select-Parameter sollte das Element sein, das entweder aus einem jquery-Selektor oder einem Aufruf von document.getElementBy stammt. Der einzige Nachteil dabei ist, dass Sie Ereignisse verlieren, die Sie mit der Auswahl verbunden haben, aber Sie können sie leicht wieder anbringen, wenn sie wieder aus der Funktion zurückgegeben werden. Ich habe mit einer Auswahl gearbeitet, die ~ 3k Elemente enthielt, und es würde 4 Sekunden auf IE9 dauern, um die Auswahl zu löschen, damit ich sie mit dem neuen Inhalt aktualisieren konnte. Fast augenblicklich auf diese Weise.

Dan
quelle
Weitere Informationen finden Sie hier: somacon.com/p542.php und auf einfachere Weise:$('#selectbox').replaceWith($('#selectbox')[0].cloneNode(false));
FDisk
0

Für Vanilla JavaScript gibt es eine einfache und elegante Möglichkeit, dies zu tun:

for(var o of document.querySelectorAll('#DropList > option')) {
  o.remove()
}
Piotr
quelle
-1

Heute hatte ich das gleiche Problem wie beim erneuten Laden des Auswahlfelds. (In Plain JS)

        var select = document.getElementById("item");
        select.options.length = 0;
        var opt = document.createElement('option');
        opt.value = 0;
        opt.innerHTML = "Select Item ...";
        opt.selected = "selected";
        select.appendChild(opt);


       for (var key in lands) {
            var opt = document.createElement('option');
            opt.value = lands[key].id;
            opt.innerHTML = lands[key].surveyNo;
            select.appendChild(opt);

        }
CHowdappaM
quelle
-2
var select =$('#selectbox').val();
user3767285
quelle
1
Sie sollten Ihre Antwort genauer beschreiben
Krupa Patel