Как очистить все параметры в раскрывающемся списке?

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

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

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

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

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

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

Чтобы удалить параметры HTML-элемента select, вы можете использовать remove()метод:

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

Важно убрать optionsзадом наперед; как remove()метод переупорядочивает optionsколлекцию. Таким образом, гарантируется, что удаляемый элемент все еще существует!

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

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

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

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

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

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

Это короткий путь:

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

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

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

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

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 сток браузер. Я думаю, что можно с уверенностью заключить, что он абсолютно совместим с любым устройством, которое есть сейчас, поэтому я рекомендую этот подход.

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

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

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

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

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

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

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

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

Обратите внимание, что
выборка может иметь обе коллекции - optgroup &
- options
как свои дочерние элементы .

Так,

Способ № 1

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

Способ № 2

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

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

Пытаться

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

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

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

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

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

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

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

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>

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

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

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

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

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

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

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>

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

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

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

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

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

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

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

while(document.getElementById("DropList").childNodes.length>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 > 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();