Мой код работает в IE, но ломается в Safari, Firefox и Opera. (большой сюрприз)

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

После поиска я узнал, что это length=0 что ему не нравится.
Я пробовал ...options=null и var clear=0; ...length=clear var clear=0; ...length=clear с тем же результатом.

Я делаю это для нескольких объектов одновременно, поэтому я ищу легкий код JS.

Вы можете использовать следующее, чтобы очистить все элементы. Обратите внимание, что

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

Чтобы удалить параметры выбранного html-объекта, вы можете использовать этот фрагмент кода:

 function removeOptions(selectbox) { var i; for(i = selectbox.options.length - 1 ; i {amp}gt;= 0 ; i--) { selectbox.remove(i); } } //using the function: removeOptions(document.getElementById("mySelectObject")); 

Это будет работать во всех браузерах. знак равно

Если вы хотите иметь легкий скрипт, то перейдите на jQuery. В jQuery решение для удаления всех опций будет таким:

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

Возможно, не самое чистое решение, но оно определенно проще, чем удаление по одному:

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

Это лучший способ:

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

Это самый короткий путь:

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

Одна строка, нет для, нет JQuery, просто.

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

Это немного современный и чистый JavaScript

document.querySelectorAll('#selectId option').forEach(option ={amp}gt; option.remove())

с прототипом JS :

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

Если вы используете JQuery и ваш элемент управления имеет идентификатор «DropList», вы можете удалить его параметры следующим образом:

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

На самом деле это работает для меня с любым списком опций, как datalist.

Надеюсь, это поможет.

Обратите внимание, что выбор может иметь как
— optgroup {amp}amp;
— коллекция опций
как его дети.

Так,

Способ № 1

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

Способ № 2

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

Я проверял, оба работают на Chrome.
Мне нравится более простой старомодный метод № 1.

Я хотел бы отметить, что проблема в первоначальном вопросе больше не актуальна сегодня. И есть еще более короткая версия этого решения:

 selectElement.length = 0; 

Я проверял, что обе версии работают в Firefox 52, Chrome 49, Opera 36, ​​Safari 5.1, IE 11, Edge 18, последних версиях Chrome, Firefox, Samsung Internet и UC Browser на Android, Safari на iPhone 6S, Android 4.2. 2 сток браузер. Я думаю, что можно с уверенностью заключить, что он абсолютно совместим с любым устройством, которое есть сейчас, поэтому я рекомендую этот подход.

Пытаться

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

Или, может быть, посмотрите в функцию removeChild ().

Или если вы используете JQuery Framework.

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

Использование JQuery — более красивый, короткий и умный способ сделать это!

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

Идите назад. Причина в том, что размер уменьшается после каждого удаления.

 for (i = (len-1); i {amp}gt; -1; i--) { document.getElementById("elementId").remove(i); } 

Это может быть использовано для очистки параметров:

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

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

Надеюсь, этот кодекс поможет вам

Я думаю, что это лучший сол. является

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

Самые простые решения самые лучшие, поэтому вам просто нужно:

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

Элементы должны быть удалены в обратном порядке, в противном случае это приведет к ошибке. Кроме того, я не рекомендую просто устанавливать значения в null , так как это может вызвать неожиданное поведение.

 var select = document.getElementById("myselect"); for (var i = select.options.length - 1 ; i {amp}gt;= 0 ; i--) select.remove(i); 

Или, если вы предпочитаете, вы можете сделать это функцией:

 function clearOptions(id) { var select = document.getElementById(id); for (var i = select.options.length - 1 ; i {amp}gt;= 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); } 

Над кодом ответа нужно внести небольшие изменения, чтобы полностью завершить список, пожалуйста, проверьте этот фрагмент кода.

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

обновите длину, и он удалит все данные из выпадающего списка. Надеюсь, это кому-нибудь поможет.

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

Если вам требуется поддержка IE, и в вашем списке выбора более 100 элементов, я настоятельно рекомендую заменить его на функцию, подобную следующей:

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

Параметр select должен быть элементом либо из селектора jquery, либо из вызова document.getElementBy. Единственным недостатком этого является то, что вы теряете события, которые были подключены к селекту, но вы можете легко присоединить их, когда они возвращаются из функции. Я работал с выбором, в котором было ~ 3 тыс. Элементов, и на IE9 потребовалось 4 секунды, чтобы очистить выбор, чтобы я мог обновить его новым содержимым. Почти мгновенно, делая это таким образом.

Для Vanilla JavaScript существует простой и элегантный способ сделать это:

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

Сегодня я столкнулся с той же проблемой, я сделал, как показано ниже, при перезагрузке выбора. (На Простом 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();