Bir açılır kutudaki tüm seçenekleri nasıl temizleyebilirim?

Kodum IE'de çalışıyor ancak Safari, Firefox ve Opera'da bozuluyor. (büyük sürpriz)

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

Aradıktan sonra, length=0hoşlanmadığını öğrendim .
Ben denedim ...options=nullve var clear=0; ...length=clearaynı sonucu.

Bir kerede birden çok nesneye yapıyorum, bu yüzden bazı hafif JS kodu arıyorum.

Tüm öğeleri temizlemek için aşağıdakileri kullanabilirsiniz.

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

HTML öğesinin seçeneklerini kaldırmak selectiçin remove()yöntemi kullanabilirsiniz :

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

optionsGeriye doğru kaldırmak önemlidir ; olarak remove()yöntemiyle yeniden düzenler optionskoleksiyonu. Bu şekilde, çıkarılacak elemanın hala mevcut olduğu garanti edilir!

Hafif bir komut dosyasına sahip olmak istiyorsanız, jQuery için gidin. JQuery'de, tüm seçenekleri kaldırmak için çözüm aşağıdaki gibi olacaktır:

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

Muhtemelen, en temiz çözüm değil, ama tek tek kaldırmaktan kesinlikle daha basit:

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

Bu en iyi yol:

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

Bu kısa bir yol:

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

Bir satır, hayır, JQuery yok, basit.

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

Orijinal sorudaki sorunun bugün artık geçerli olmadığını belirtmek isterim. Ve bu çözümün daha kısa bir versiyonu var:

selectElement.length = 0;

Her iki sürümün de Firefox 52, Chrome 49, Opera 36, ​​Safari 5.1, IE 11, Edge 18, Chrome'un en yeni sürümleri, Firefox, Samsung Internet ve Android'de UC Tarayıcı, iPhone 6S, Android 4.2'de çalıştığını test ettim. 2 stok tarayıcı. Şu anda mevcut olan cihazlarla kesinlikle uyumlu olduğu sonucuna varmanın güvenli olduğunu düşünüyorum, bu yüzden bu yaklaşımı öneriyorum.

Bu biraz modern ve saf bir JavaScript

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

ile PrototypeJS :

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

JQuery kullanıyorsanız ve seçme denetiminiz "DropList" kimliğine sahipse, bu şekilde seçeneklerini kaldırabilirsiniz:

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

Aslında benim için veri listesi gibi herhangi bir seçenek listesiyle çalışıyor.

Umarım yardımcı olur.

Bir
seçimin alt öğesi olarak - optgroup &
- options koleksiyonuna sahip olabileceğini unutmayın
.

Yani,

Yöntem 1

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

Yöntem # 2

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

Test ettim, ikisi de Chrome'da çalışıyor.
Daha basit, eski moda, yöntem # 1'i seviyorum.

Deneyin

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

Veya removeChild () işlevine bakın.

Veya jQuery çerçevesini kullanıyorsanız.

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

JQuery kullanmak bunu yapmanın daha güzel, daha kısa ve daha akıllı bir yoludur!

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

Bu, seçenekleri temizlemek için kullanılabilir:

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>

Geri git. Sebebi, her çıkarmadan sonra boyut küçülmesidir.

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

Umarım, bu kod size yardımcı olacaktır

Bence bu en iyi çözüm. dır-dir

 $ ( "# Myselectid") html ( ''); 

En basit çözümler en iyisidir, bu yüzden ihtiyacınız var:

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>

Öğeler ters olarak çıkarılmalıdır, aksi takdirde bir hataya neden olur. Ayrıca, nullbeklenmedik davranışlara neden olabileceğinden, sadece değerlerin ayarlanmasını önermiyorum .

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

Veya isterseniz bir işlev yapabilirsiniz:

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

Listenin tamamının kaldırılması için yanıtlama kodunun üzerinde hafif bir değişiklik yapılması gerekiyor, lütfen bu kod parçasını kontrol edin.

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

uzunluğu yenileyin ve açılır listeden tüm verileri kaldıracaktır. Umarım bu birine yardımcı olur.

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

IE'yi desteklemeniz gerekiyorsa ve seçim listenizde 100'den fazla öğe varsa, seçimi aşağıdaki gibi bir işlevle değiştirmenizi kesinlikle öneririz:

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

Select parametresi, jquery seçicisinden veya document.getElementBy çağrısından alınan öğe olmalıdır. Bunun tek dezavantajı, seçime kadar bağladığınız olayları kaybetmenizdir, ancak işlevden geri döndüğü için bunları kolayca yeniden bağlayabilirsiniz. ~ 3k öğeleri olan bir seçimle çalışıyordum ve yeni içerikle güncelleyebilmemiz için seçimi temizlemek IE9'da 4 saniye sürüyordu. Neredeyse anında bu şekilde yapıyor.

Vanilla JavaScript için bunu yapmanın basit ve zarif bir yolu vardır:

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

Bugün aynı sorunla karşı karşıya kaldım, seçim kutusunu yeniden yüklerken aşağıdaki gibi yaptım. (Düz JS'de)

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