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

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.

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

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!

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

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

document.getElementById("DropList").innerHTML = "";

Dies ist der beste Weg:

function (comboBox) {
    while (comboBox.options.length > 0) {                
        comboBox.remove(0);
    }        
}

Dies ist ein kurzer Weg:

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

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

function removeOptions(obj) {
    while (obj.options.length) {
        obj.remove(0);
    }
}

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.

Dies ist ein bisschen modernes und reines JavaScript

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

mit PrototypeJS :

$('yourSelect').select('option').invoke('remove');

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.

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.

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

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

$('#selection_box_id').empty();

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>

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

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

Ich denke das ist das beste Sol. ist

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

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>

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

var select = document.getElementById('/*id attribute of your select here*/');
for (var option in select){
    select.remove(option);
}

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.

while(document.getElementById("DropList").childNodes.length>0) 
{
    document.getElementById("DropList").removeChild(document.getElementById("DropList").childNodes[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.

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

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

        }

var select =$('#selectbox').val();