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

Ответ 1

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

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

Ответ 2

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

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

Это будет работать во всех браузерах. =)

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

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

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

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

Ответ 7

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

Ответ 8

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

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

Ответ 9

с PrototypeJS:

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

Ответ 10

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

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

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

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

Ответ 11

Обратите внимание, что выбор может иметь как - optgroup &
- коллекция опций
 как его дети.

Итак,

Метод # 1

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

Метод # 2

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

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

Ответ 12

Try

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

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

Или, если вы используете фреймворк jQuery.

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

Ответ 13

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

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

Ответ 14

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

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

Ответ 15

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

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

Ответ 16

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

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>

Ответ 17

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

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

Ответ 18

Я думаю, что это лучший зол.

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

Ответ 19

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

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>

Ответ 20

Элементы следует удалить в обратном порядке, иначе это приведет к ошибке. Кроме того, я не рекомендую просто устанавливать значения 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");

Ответ 21

var select = document.getElementById('/*id attribute of your select here*/');
for (var option in select){
    select.remove(option);
}

Ответ 22

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

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

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

Ответ 23

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

Ответ 24

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

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. Единственным недостатком этого является то, что вы теряете события, которые вы подключили к выбору, но вы можете легко их повторно подключить, поскольку он возвращается обратно из функции. Я работал с select, который имел ~ 3k элементов, и для IE9 потребуется 4 секунды, чтобы очистить выбор, чтобы я мог обновить его с новым контентом. Почти мгновенно это делается.

Ответ 25

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

        }

Ответ 26

var select =$('#selectbox').val();

Ответ 27

$( "# yourDDL" ). get (0).options.length = 0;