ฉันจะล้างตัวเลือกทั้งหมดในกล่องแบบเลื่อนลงได้อย่างไร

รหัสของฉันทำงานใน 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 และตัวควบคุมที่คุณเลือกมี ID "DropList" คุณสามารถลบตัวเลือกของมันได้ด้วยวิธีนี้:

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

อันที่จริงมันใช้งานได้สำหรับฉันกับรายการตัวเลือกเช่น datalist

หวังว่ามันจะช่วย

โปรดทราบว่าตัวเลือกสามารถมีทั้ง
- optgroup &
- ตัวเลือกคอลเลกชัน
เป็นลูก ๆ

ดังนั้น,

วิธีที่ # 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 ข้อเสียเพียงอย่างเดียวคือคุณสูญเสียกิจกรรมที่คุณต่อสายไปยังตัวเลือก แต่คุณสามารถใส่กลับเข้าไปใหม่ได้อย่างง่ายดายเนื่องจากมันถูกส่งกลับจากฟังก์ชั่น ฉันทำงานกับตัวเลือกที่มีรายการ ~ 3k และใช้เวลา 4 วินาทีใน IE9 เพื่อล้างการเลือกเพื่อให้ฉันสามารถอัปเดตด้วยเนื้อหาใหม่ เกือบจะทันทีที่ทำเช่นนี้

สำหรับ 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();