web-dev-qa-db-ja.com

ドロップダウンボックスのすべてのオプションをオフにする方法

私のコードはIEで動作しますが、Safari、Firefox、およびOperaでは動作しません。 （ビッグサプライズ）

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

検索したところ、length=0が好きではないことがわかりました。
私は...options=nullとvar clear=0; ...length=clearを同じ結果で試しました。

私は一度に複数のオブジェクトにこれをやっているので、私はいくつかの軽量のJSコードを探しています。

javascripthtml-select
113
Kirt

以下を使用して、すべての要素を消去することができます。ご了承ください

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

選択したHTMLオブジェクトのオプションを削除するには、次のコードを使用します。

function removeOptions(selectbox)
{
    var i;
    for(i = selectbox.options.length - 1 ; i >= 0 ; i--)
    {
        selectbox.remove(i);
    }
}
//using the function:
removeOptions(document.getElementById("mySelectObject"));

これはすべてのブラウザで機能します。 =）

251
Fabiano

軽量のスクリプトを使用したい場合は、jQueryを使用してください。 jQueryでは、すべてのオプションを削除するための解決策は次のようになります。

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

おそらく、最もきれいな解決策ではありませんが、1つずつ削除するよりも確実に簡単です。

document.getElementById("DropList").innerHTML = "";
85
Dmitry Shintyakov

これが最善の方法です。

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

これが最短の方法です：

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

1行、ノー、ノーJQuery、単純です。

23
Firemen26
function removeOptions(obj) {
    while (obj.options.length) {
        obj.remove(0);
    }
}
14
Julio Garcia

これは少し現代的で純粋なJavaScriptです。

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

7
a_rahmanshah

JQueryを使用していて、選択コントロールのIDが "DropList"の場合は、この方法でそのオプションを削除できます。

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

実際にはdatalistのように、どんなオプションリストでも私のために働きます。

それが役に立てば幸い。

6
norgematos

選択は両方を持つことができることに注意してください
- optgroup＆
- オプションコレクション
その子として。

そう、

方法1

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

方法2

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

私はテストした、両方ともChrome上で動作する。
私はもっとシンプルで昔風の方法＃1が好きです。

6
Manohar Reddy Poreddy

とPrototypeJS：

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

やってみる

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

あるいは、removeChild（）関数を調べてください。

あるいは、あなたがjQueryフレームワークを使うならば。

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

JQueryを使用することは、それを実行するためのより美しく、より短く、よりスマートな方法です。

$('#selection_box_id').empty();
4
Sobin Sunny

これはオプションを消去するために使用できます。

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>
4
Vichu

逆に行きなさい。その理由は、削除するたびにサイズが小さくなることです。

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

アイテムを逆に削除する必要があります、そうでなければそれはエラーの原因となります。また、予期しない動作を引き起こす可能性があるため、単に値を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");
2
Dan Bray

最も簡単な解決策が最善ですので、あなただけが必要です：

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>
2
nitka.pawel
var select = document.getElementById("DropList");
var length = select.options.length;
for (i = 0; i < length; i++) {
  select.options[i].remove();
}

願って、このコードはあなたを助けます

2
user11441779

それが最善の解決策だと思います。です

 $（ "＃myselectid"）。html（ ''）; 
2
Ossama Zakaria

上記の回答のコードは、リストを完全に削除するためにわずかな変更が必要です。このコードを確認してください。

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

長さを更新すると、ドロップダウンリストからすべてのデータが削除されます。これが誰かに役立つことを願っています。

1
NoNaMe

元の質問の問題は、今日はもう意味がないことを指摘しておきます。そしてその解決策のさらに短いバージョンがあります。

selectElement.length = 0;

両方のバージョンがFirefox 52、Chrome 49、Opera 36、Safari 5.1、IE 11、Edge 18、Chromeの最新バージョン、Firefox、Samsung Internet、およびAndroidのUCブラウザ、Safari onで動作することをテストしました。 iPhone 6S、Android 4.2.2の標準ブラウザ。私はそれが今そこにあるどんなデバイスとも絶対に互換性があると結論づけることが安全であると思うので、私はこのアプローチをお勧めします。

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

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呼び出しのいずれかからの要素になります。唯一のマイナス面は、あなたがselectに結び付けたイベントを失うことですが、関数から返されるのでそれらを簡単に再アタッチすることができます。私は〜3kのアイテムを持っていたセレクトで作業していました、そして私が新しいコンテンツでそれを更新することができるようにIE9でセレクトをクリアするのに4秒かかるでしょう。このようにしてほぼ瞬時にそれをやっています。

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