Jak wyczyścić wszystkie opcje w menu rozwijanym?

Mój kod działa w IE, ale psuje się w Safari, Firefox i Opera. (Wielka niespodzianka)

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

Po przeszukaniu dowiedziałem się, length=0że to tego nie lubi.
Próbowałem ...options=nulliz var clear=0; ...length=cleartakim samym wynikiem.

Robię to na wielu obiektach naraz, więc szukam lekkiego kodu JS.

Aby wyczyścić wszystkie elementy, możesz użyć następujących poleceń.

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

Aby usunąć opcje elementu HTML programu select, możesz skorzystać z remove()metody:

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

Ważne jest, aby usunąć optionstył; ponieważ remove()metoda przestawia optionskolekcję. W ten sposób gwarantuje się, że element do usunięcia nadal istnieje!

Jeśli chcesz mieć lekki skrypt, wybierz jQuery. W jQuery rozwiązaniem do usunięcia wszystkich opcji będzie:

$("#droplist").empty();

Prawdopodobnie nie jest to najczystsze rozwiązanie, ale jest zdecydowanie prostsze niż usuwanie pojedynczo:

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

To najlepszy sposób:

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

To jest krótka droga:

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

Jedna linia, nie dla, bez JQuery, prosta.

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

Chciałbym zaznaczyć, że problem w pierwotnym pytaniu nie ma już dziś znaczenia. A jest jeszcze krótsza wersja tego rozwiązania:

selectElement.length = 0;

Przetestowałem, że obie wersje działają w Firefox 52, Chrome 49, Opera 36, ​​Safari 5.1, IE 11, Edge 18, najnowszych wersjach Chrome, Firefox, Samsung Internet i UC Browser na Androidzie, Safari na iPhone 6S, Android 4.2. 2 przeglądarka zapasowa. Myślę, że można bezpiecznie stwierdzić, że jest on całkowicie kompatybilny z dowolnym urządzeniem, które jest obecnie, więc polecam takie podejście.

To trochę nowoczesny i czysty JavaScript

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

z PrototypeJS :

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

Jeśli używasz JQuery i kontrolka wyboru ma identyfikator „DropList”, możesz usunąć jej opcje w ten sposób:

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

Właściwie to działa dla mnie z każdą listą opcji, taką jak datalist.

Mam nadzieję, że to pomoże.

Zauważ, że element select może mieć zarówno
kolekcję - optgroup, jak i
- options
jako swoje dzieci.

Więc,

Metoda nr 1

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

Metoda nr 2

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

Testowałem, oba działają na Chrome.
Podoba mi się prostsza, staroświecka metoda nr 1.

Próbować

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

A może zajrzyj do funkcji removeChild ().

Lub jeśli używasz frameworka jQuery.

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

Używanie JQuery to ładniejszy, krótszy i sprytniejszy sposób na zrobienie tego!

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

Można to wykorzystać do wyczyszczenia opcji:

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>

Idź wstecz. Przyczyną jest zmniejszenie rozmiaru po każdym usunięciu.

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

Mam nadzieję, że ten kod ci pomoże

Myślę, że to najlepszy sol. jest

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

Najprostsze rozwiązania są najlepsze, wystarczy więc:

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>

Elementy należy usunąć w odwrotnej kolejności, w przeciwnym razie spowoduje to błąd. Nie polecam też prostego ustawiania wartości na null, ponieważ może to spowodować nieoczekiwane zachowanie.

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

Lub jeśli wolisz, możesz uczynić z tego funkcję:

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

Powyższy kod odpowiedzi wymaga niewielkiej zmiany, aby całkowicie usunąć listę, sprawdź ten fragment kodu.

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

odświeżyć długość i usunie wszystkie dane z rozwijanej listy. Mam nadzieję, że to komuś pomoże.

while(document.getElementById("DropList").childNodes.length>0) 
{
    document.getElementById("DropList").removeChild(document.getElementById("DropList").childNodes[0]);
}

Jeśli musisz obsługiwać IE i masz więcej niż 100 pozycji na swojej liście wyboru, zdecydowanie zalecamy rozważenie zastąpienia zaznaczenia taką funkcją:

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

Parametr select powinien być elementem z selektora jquery lub wywołania document.getElementBy. Jedynym minusem jest to, że tracisz zdarzenia, które podłączyłeś do elementu select, ale możesz je łatwo podłączyć ponownie, ponieważ są one zwracane z funkcji. Pracowałem z wyborem, który miał ~ 3k elementów, a wyczyszczenie zaznaczenia zajęłoby 4 sekundy w IE9, aby móc zaktualizować go o nową zawartość. Niemal natychmiast robi to w ten sposób.

W przypadku Vanilla JavaScript można to zrobić w prosty i elegancki sposób:

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

Dzisiaj miałem ten sam problem, co przy przeładowywaniu zaznaczonego pudełka zrobiłem jak poniżej. (W zwykłym 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();