Bagaimana cara menghapus semua opsi di kotak dropdown?

Kode saya berfungsi di IE tetapi terputus di Safari, Firefox, dan Opera. (kejutan besar)

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

Setelah mencari, saya belajar bahwa itu length=0yang tidak disukainya.
Saya sudah mencoba ...options=nulldan var clear=0; ...length=cleardengan hasil yang sama.

Saya melakukan ini ke beberapa objek sekaligus, jadi saya mencari beberapa kode JS ringan.

Anda dapat menggunakan yang berikut ini untuk menghapus semua elemen.

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

Untuk menghapus opsi elemen HTML select, Anda dapat menggunakan remove()metode ini:

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

Penting untuk menghapus optionsmundur; sebagai remove()metode menata ulang optionskoleksi. Dengan cara ini, dijamin bahwa elemen yang akan dihapus masih ada!

Jika Anda ingin memiliki skrip yang ringan, gunakan jQuery. Di jQuery, solusi untuk menghapus semua opsi akan seperti:

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

Mungkin, bukan solusi terbersih, tetapi jelas lebih sederhana daripada menghapus satu-per-satu:

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

Ini cara terbaik:

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

Ini cara yang singkat:

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

Satu baris, tidak untuk, tanpa JQuery, sederhana.

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

Saya ingin menunjukkan bahwa masalah dalam pertanyaan awal tidak relevan lagi hari ini. Dan bahkan ada versi yang lebih pendek dari solusi itu:

selectElement.length = 0;

Saya telah menguji bahwa kedua versi berfungsi di Firefox 52, Chrome 49, Opera 36, ​​Safari 5.1, IE 11, Edge 18, versi terbaru Chrome, Firefox, Samsung Internet dan UC Browser di Android, Safari di iPhone 6S, Android 4.2. 2 browser saham. Saya pikir aman untuk menyimpulkan bahwa itu benar-benar kompatibel dengan perangkat apa pun yang ada saat ini, jadi saya merekomendasikan pendekatan ini.

Ini sedikit modern dan murni JavaScript

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

dengan PrototypeJS :

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

Jika Anda menggunakan JQuery dan kontrol pilih Anda memiliki ID "DropList", Anda dapat menghapus opsinya dengan cara ini:

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

Sebenarnya itu bekerja untuk saya dengan daftar opsi apa saja, seperti datalist.

Semoga ini bisa membantu.

Perhatikan bahwa pilih dapat memiliki keduanya
- grup pilihan &
- koleksi pilihan
sebagai anak-anaknya.

Begitu,

Metode # 1

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

Metode # 2

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

Saya diuji, keduanya bekerja di Chrome.
Saya suka yang sederhana, kuno, metode # 1.

Mencoba

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

Atau mungkin lihat fungsi removeChild ().

Atau jika Anda menggunakan kerangka jQuery.

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

Menggunakan JQuery adalah cara yang lebih cantik, lebih pendek & lebih cerdas untuk melakukannya!

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

Ini dapat digunakan untuk menghapus opsi:

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>

Mundur. Alasannya adalah ukuran berkurang setelah setiap penghapusan.

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

Semoga kode ini akan membantu Anda

Saya pikir itu sol terbaik. adalah

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

Solusi paling sederhana adalah yang terbaik, jadi Anda hanya perlu:

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>

Item harus dihapus secara terbalik, jika tidak maka akan menyebabkan kesalahan. Juga, saya tidak merekomendasikan pengaturan nilai null, karena hal itu dapat menyebabkan perilaku yang tidak terduga.

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

Atau jika Anda mau, Anda bisa membuatnya berfungsi:

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

Di atas kode jawaban perlu sedikit perubahan untuk menghapus daftar lengkap, silakan periksa bagian kode ini.

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

menyegarkan panjang dan itu akan menghapus semua data dari daftar drop down. Semoga ini bisa membantu seseorang.

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

Jika Anda harus mendukung IE dan Anda memiliki lebih dari 100 item dalam daftar pilih Anda, saya sangat menyarankan Anda mempertimbangkan untuk mengganti pilih dengan fungsi seperti:

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

Parameter yang dipilih harus elemen baik dari pemilih jquery atau document.getElementBy panggilan. Satu-satunya downside ke ini adalah bahwa Anda kehilangan acara yang telah ditransfer ke pilih, tetapi Anda dapat dengan mudah memasang kembali mereka karena dikembalikan kembali dari fungsi. Saya sedang bekerja dengan pilih yang memiliki ~ 3rb item dan itu akan memakan waktu 4 detik pada IE9 untuk menghapus pilih sehingga saya dapat memperbaruinya dengan konten baru. Hampir instan melakukannya dengan cara ini.

Untuk Vanilla JavaScript ada cara sederhana dan elegan untuk melakukan ini:

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

Hari ini saya menghadapi masalah yang sama, saya lakukan seperti di bawah ini saat memuat ulang kotak pilih. (Dalam 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();