Làm cách nào để xóa tất cả các tùy chọn trong hộp thả xuống?

Mã của tôi hoạt động trong IE nhưng bị hỏng trong Safari, Firefox và Opera. (bất ngờ lớn)

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

Sau khi tìm kiếm, tôi đã học được rằng nó length=0không giống như vậy.
Tôi đã thử ...options=nullvà var clear=0; ...length=clearvới kết quả tương tự.

Tôi đang làm điều này cho nhiều đối tượng cùng một lúc, vì vậy tôi đang tìm kiếm một số mã JS nhẹ.

Bạn có thể sử dụng như sau để xóa tất cả các yếu tố.

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

Để xóa các tùy chọn của phần tử HTML select, bạn có thể sử dụng remove()phương thức:

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

Điều quan trọng là phải loại bỏ optionsngược; như remove()phương pháp sắp xếp lại optionsbộ sưu tập. Bằng cách này, đảm bảo rằng phần tử cần loại bỏ vẫn tồn tại!

Nếu bạn muốn có một kịch bản nhẹ, thì hãy tìm jQuery. Trong jQuery, giải pháp xóa tất cả các tùy chọn sẽ như sau:

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

Có lẽ, không phải là giải pháp sạch nhất, nhưng nó chắc chắn đơn giản hơn việc loại bỏ từng cái một:

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

Đây la cach tôt nhât :

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

Đây là một cách ngắn:

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

Một dòng, không cho, không JQuery, đơn giản.

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

Tôi muốn chỉ ra rằng vấn đề trong câu hỏi ban đầu không còn phù hợp ngày hôm nay nữa. Và thậm chí còn có phiên bản ngắn hơn của giải pháp đó:

selectElement.length = 0;

Tôi đã thử nghiệm rằng cả hai phiên bản đều hoạt động trong Firefox 52, Chrome 49, Opera 36, ​​Safari 5.1, IE 11, Edge 18, các phiên bản mới nhất của Chrome, Firefox, Samsung Internet và UC Browser trên Android, Safari trên iPhone 6S, Android 4.2. 2 trình duyệt chứng khoán. Tôi nghĩ thật an toàn khi kết luận rằng nó hoàn toàn tương thích với bất kỳ thiết bị nào hiện có, vì vậy tôi khuyên bạn nên sử dụng phương pháp này.

Đây là một chút JavaScript hiện đại và thuần túy

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

với PrototypeJS :

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

Nếu bạn đang sử dụng JQuery và điều khiển chọn của bạn có ID "DropList", bạn có thể xóa các tùy chọn của nó theo cách này:

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

Trên thực tế, nó hoạt động với tôi với bất kỳ danh sách tùy chọn, như datalist.

Hy vọng nó giúp.

Lưu ý rằng một lựa chọn có thể có cả hai
-
bộ sưu tập tùy chọn & - tùy chọn
làm con của nó.

Vì thế,

Phương pháp số 1

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

Phương pháp # 2

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

Tôi đã thử nghiệm, cả hai đều hoạt động trên Chrome.
Tôi thích cách đơn giản hơn, lỗi thời, phương pháp số 1.

Thử

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

Hoặc có thể xem xét hàm removeChild ().

Hoặc nếu bạn sử dụng khung jQuery.

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

Sử dụng JQuery là một cách đẹp hơn, ngắn hơn và thông minh hơn để làm điều đó!

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

Điều này có thể được sử dụng để xóa các tùy chọn:

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>

Đi ngược lại. Lý do là kích thước giảm sau mỗi lần loại bỏ.

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

Hy vọng, mã này sẽ giúp bạn

Tôi nghĩ rằng đó là sol tốt nhất. Là

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

Các giải pháp đơn giản nhất là tốt nhất, vì vậy bạn chỉ cần:

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>

Các mục nên được loại bỏ ngược lại, nếu không nó sẽ gây ra lỗi. Ngoài ra, tôi không khuyên bạn chỉ nên đặt các giá trị thành null, vì điều đó có thể gây ra hành vi không mong muốn.

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

Hoặc nếu bạn thích, bạn có thể làm cho nó một chức năng:

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

Mã trả lời ở trên cần một thay đổi nhỏ để xóa danh sách hoàn tất, vui lòng kiểm tra đoạn mã này.

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

làm mới độ dài và nó sẽ xóa tất cả dữ liệu khỏi danh sách thả xuống. Hy vọng điều này sẽ giúp được ai đó.

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

Nếu bạn phải hỗ trợ IE và bạn có hơn 100 mục trong danh sách lựa chọn của mình, tôi thực sự khuyên bạn nên xem xét thay thế lựa chọn bằng một chức năng như vậy:

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

Tham số select phải là thành phần từ một bộ chọn jquery hoặc lệnh gọi document.getEuityBy. Nhược điểm duy nhất của việc này là bạn mất các sự kiện mà bạn đã kết nối với lựa chọn, nhưng bạn có thể dễ dàng gắn lại chúng khi nó được đưa trở lại khỏi chức năng. Tôi đã làm việc với một lựa chọn có ~ 3k mục và sẽ mất 4 giây trên IE9 để xóa lựa chọn để tôi có thể cập nhật nó với nội dung mới. Gần như ngay lập tức làm theo cách này.

Đối với Vanilla JavaScript, có một cách đơn giản và thanh lịch để làm điều này:

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

Hôm nay tôi đã phải đối mặt với vấn đề tương tự, tôi đã làm như dưới đây trong khi tải lại hộp chọn. (Trong đồng bằng 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();