Мой код работает в 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 = 0; i < length; i++) {
select.options[i] = null;
}
Чтобы удалить параметры объекта 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"));
Это будет работать во всех браузерах. =)
Если вы хотите иметь легкий скрипт, тогда перейдите на 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);
}
}
Это немного современный и чистый JavaScript
document.querySelectorAll('#selectId option').forEach(option => option.remove())
с PrototypeJS:
$('yourSelect').select('option').invoke('remove');
Если вы используете JQuery и ваш элемент управления имеет идентификатор "DropList", вы можете удалить его параметры, выполнив следующие действия:
$('#DropList option').remove();
На самом деле это работает для меня с любым списком опций, например, datalist.
Надеюсь, это поможет.
Обратите внимание, что выбор может иметь как
- optgroup &
- коллекция опций
как его дети.
Итак,
Метод # 1
var selectElement = document.getElementById('myselectid');
selectElement.innerHTML = '';
Метод # 2
var selectElement = document.getElementById('myselectid');
selectElement.textContent = '';
Я тестировал, оба работают в Chrome.
Мне нравится более простой, старомодный метод # 1.
Try
document.getElementsByTagName("Option").length=0
Или, может быть, посмотрите на функцию removeChild().
Или, если вы используете фреймворк jQuery.
$("DropList Option").each(function(){$(this).remove();});
Я хотел бы отметить, что проблема в первоначальном вопросе больше не актуальна сегодня. И есть еще более короткая версия этого решения:
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 сток браузер. Я думаю, что можно с уверенностью заключить, что он абсолютно совместим с любым устройством, которое есть сейчас, поэтому я рекомендую этот подход.
Использование JQuery - это более красивый, более короткий и умный способ сделать это!
$('#selection_box_id').empty();
Вернитесь назад. Причина уменьшения размера после каждого удаления.
for (i = (len-1); i > -1; i--) {
document.getElementById("elementId").remove(i);
}
Это можно использовать для очистки параметров:
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>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 элементов в списке выбора, я настоятельно рекомендую вам заменить функцию 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 секунды, чтобы очистить выбор, чтобы я мог обновить его с новым контентом. Почти мгновенно это делается.
Сегодня я столкнулся с такой же проблемой, как и при загрузке блока выбора. (В 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();
$( "# yourDDL" ). get (0).options.length = 0;