ドロップダウンボックスのすべてのオプションをクリアするにはどうすればよいですか？

私のコードは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();

おそらく、最もクリーンなソリューションではありませんが、1つずつ削除するよりも間違いなく簡単です。

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

これが最善の方法です。

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

これは短い方法です：

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

1行で、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インターネット、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を超える項目がある場合は、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秒かかりました。この方法でほぼ瞬時に実行できます。

バニラ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();