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

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

내 코드는 IE에서 작동하지만 Safari, Firefox, Opera에서는 작동되지 않습니다.(대단한 놀라움)

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

검색해본 결과, 저는 그게 바로length=0마음에 안 드는 것 같아요.
해봤어요...options=null그리고.var clear=0; ...length=clear같은 결과를 낳았습니다.

한 번에 여러 오브젝트에 대해 하기 때문에 가벼운 JS 코드를 찾고 있습니다.

의 HTML 요소의 옵션을 삭제하려면 다음 방법을 사용할 수 있습니다.

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

뒷부분을 제거하는 것이 중요합니다.remove()method는 다음 순서를 변경합니다.options수집.이렇게 하면 제거할 요소가 계속 존재할 수 있습니다!

경량 스크립트를 사용하고 싶은 경우는, jQuery 를 선택합니다.jQuery에서 모든 옵션을 삭제하는 솔루션은 다음과 같습니다.

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

아마도 가장 깨끗한 솔루션은 아닐 것입니다만, 1개씩 제거하는 것보다 확실히 간단합니다.

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

이것이 가장 좋은 방법입니다.

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

다음을 사용하여 모든 요소를 지울 수 있습니다.

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

이 방법은 간단합니다.

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

한 줄, 아니 JQuery 없이 단순합니다.

저는 원래 질문의 문제가 오늘날에는 더 이상 관련이 없다는 것을 지적하고 싶습니다.이 솔루션에는 더 짧은 버전이 있습니다.

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 스톡 브라우저에서 작동하는 것을 테스트했습니다.현시점에서는 어떤 기기와도 완전히 호환된다고 판단해도 무방하다고 생각하기 때문에, 이 방법을 추천합니다.

이것은 조금 현대적이고 순수한 자바스크립트입니다.

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

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

해라

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

또는 removeChild() 함수를 조사합니다.

또는 jQuery 프레임워크를 사용하는 경우.

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

프로토타입 사용JS:

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

선택에는, 다음의 양쪽 모두를 포함할 수 있습니다.
- optgroup &
- 옵션 컬렉션
그 자식들로서.

그렇게,

방법 #1

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

방법 #2

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

테스트해 봤는데 둘 다 크롬으로 작동해요.
나는 간단하고 구식인 방법 #1이 좋다.

JQuery를 사용 중이며 선택 컨트롤의 ID가 "DropList"인 경우 다음과 같이 옵션을 제거할 수 있습니다.

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

사실 데이터리스트처럼 어떤 옵션 리스트에서도 사용할 수 있습니다.

도움이 됐으면 좋겠다.

JQuery를 사용하는 것이 더 예쁘고 짧고 스마트한 방법입니다!

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

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

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

거꾸로 가다.이유는 제거할 때마다 크기가 감소하기 때문입니다.

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

나는 그것이 최고의 솔이라고 생각한다.이

$("#myselectid").syslog(""");

이것은, 다음의 옵션을 클리어 하기 위해서 사용할 수 있습니다.

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

호프, 이 코드가 도움이 될 거야

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

항목을 반대로 제거해야 합니다. 그렇지 않으면 오류가 발생합니다.또한 단순히 값을 다음과 같이 설정하는 것은 권장하지 않습니다.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("DropList");
var length = select.options.length;
for (i = 0; i < length;) {
  select.options[i] = null;
  length = select.options.length;
}

길이를 새로 고치면 드롭다운 목록에서 모든 데이터가 제거됩니다.이게 누군가에게 도움이 되길 바랍니다.

가장 심플한 솔루션이 가장 좋기 때문에 다음 사항만 있으면 됩니다.

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>

for (var opt of document.querySelectorAll('#DropList option'))
{ 
  opt.remove();
}

이 솔루션은 optgroup과도 연동됩니다.

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 selector 또는 document.getElementBy 콜의 요소여야 합니다.이 문제의 유일한 단점은 선택 항목에 연결된 이벤트가 손실된다는 것입니다. 단, 해당 이벤트는 함수에서 반환되므로 쉽게 다시 연결할 수 있습니다.최대 3000개의 아이템이 있는 셀렉트로 작업하고 있었는데 IE9에서 셀렉트를 클리어하는 데 4초가 걸려서 새로운 콘텐츠로 업데이트 할 수 있었습니다.거의 즉각적으로 이런 식으로.

오늘도 같은 문제가 발생하여 셀렉트박스를 새로고침하면서 아래와 같이 했습니다.(보통 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);

        }

언급URL : https://stackoverflow.com/questions/3364493/how-do-i-clear-all-options-in-a-dropdown-box