Як очистити всі параметри у спадному вікні?

Мій код працює в 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())

з PrototypeJS :

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

Якщо ви використовуєте JQuery, а ваш елемент управління має ідентифікатор "DropList", ви можете видалити його параметри таким чином:

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

Насправді він працює для мене з будь-яким списком варіантів, як, наприклад, даталіст.

Сподіваюся, це допомагає.

Зауважте, що вибір може мати колекцію обох
- 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 call. Єдиним недоліком цього є те, що ви втрачаєте події, які ви з'єднали до вибору, але ви можете легко приєднати їх назад, оскільки вони повертаються назад із функції. Я працював з виділенням, у якого було ~ 3 к. Елементів, і на IE9 знадобиться 4 секунди, щоб очистити вибір, щоб я міг оновити його новим вмістом. Майже миттєво це роблять таким чином.

Для ванільного 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();