드롭 다운 상자에서 모든 옵션을 지우려면 어떻게합니까?

내 코드는 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, Android의 최신 버전의 Chrome, Firefox, Samsung Internet 및 UC Browser, iPhone 6S의 Safari, 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와 같은 옵션 목록으로 저에게 효과적입니다.

도움이 되길 바랍니다.

select는
-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 프레임 워크를 사용하는 경우

$("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 항목이있는 선택 작업을하고 있었고 IE9에서 선택을 지우려면 4 초가 걸리므로 새 내용으로 업데이트 할 수 있습니다. 이런 식으로 거의 즉시 수행합니다.

Vanilla JavaScript에는 간단하고 우아한 방법이 있습니다.

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

오늘도 같은 문제에 직면했습니다. 선택 상자를 다시로드하는 동안 아래와 같이했습니다. (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();