36

リンクをクリックするだけで、複数選択が有効でオプショングループがある選択メニューで、事前に選択されたすべてのオプションを選択解除できるようにしたいと考えています。

以下はメニューの一例です。

<select name="ddBusinessCategory" id="ddBusinessCategory" class="f1" style="width:280px;height:200px" multiple="multiple">
<option value="">Select One</option>
<optgroup label="Abrasives" style="background:#F5F5F5;border-bottom:1px #EEE solid">
<option value="4" selected="selected">Abrasives</option>
</optgroup>
<optgroup label="Abstracters" style="background:#F5F5F5;border-bottom:1px #EEE solid">
<option value="5">Abstracters</option>
</optgroup>
<optgroup label="Abuse Information &amp; Treatment Centers" style="background:#F5F5F5;border-bottom:1px #EEE solid">
<option value="6" selected="selected">Abuse Information &amp; Treatment Centers</option>
</optgroup>
<optgroup label="Accountants" style="background:#F5F5F5;border-bottom:1px #EEE solid">
<option value="7">Accountants</option>
<option value="2672">Certified Public Accountants - </option>
<option value="2673">Public Accountants - </option>
</optgroup>
<optgroup label="Accounting Services" style="background:#F5F5F5;border-bottom:1px #EEE solid">
<option value="8">Accounting Services</option>
</optgroup>
<optgroup label="Acoustical Materials - Wholesale &amp; Manufacturers" style="background:#F5F5F5;border-bottom:1px #EEE solid">
<option value="9">Acoustical Materials - Wholesale &amp; Manufacturers</option>
</optgroup>
</select>

2 つが選択されていることがわかります。事前に選択されているこれらの選択を解除できるようにしたいと考えています。

jquery を使いたくない、ただ javascript を使いたいだけ

ご協力ありがとうございました。

ネオジャキー

4

8 に答える 8

44

次の関数は、すべてのオプションをループして選択を解除する必要があります。

HTML

<a href="#" onclick="clearSelected();">clear</a>

ジャバスクリプト

 function clearSelected(){
    var elements = document.getElementById("ddBusinessCategory").options;

    for(var i = 0; i < elements.length; i++){
      elements[i].selected = false;
    }
  }

編集：

イベント ハンドラーを要素に直接配置することはお勧めしません。オプションがある場合は、要素に何らかのタイプの id/name を指定し、JavaScript コードでイベント ハンドラーをバインドします。

例

于 2012-10-09T15:02:01.270 に答える
29

使用する方が簡単ではないでしょうか?:

document.getElementById("ddBusinessCategory").value = "";
于 2015-07-03T20:57:51.923 に答える
9

javascript プロパティ "selectedOptions" を使用して、Chase のコードを単純化できます。

HTML

<a href="#" onclick="clearSelected();">clear</a>

ジャバスクリプト

function clearSelected(){
    var elements = document.getElementById("ddBusinessCategory").selectedOptions;

    for(var i = 0; i < elements.length; i++){
      elements[i].selected = false;
    }
  }

この場合、すべてのオプションではなく、すでに選択されているオプションでループを実行します。

于 2014-02-05T08:21:43.057 に答える
2

<IE8を気にしない場合：

var checkedElements = document.querySelectorAll("#ddBusinessCategory :checked");

​for(var i = 0, length = checkedElements.length; i < length; i++) {
    checkedElements[i].selected = false;
}​

<IE9を気にしない場合

Array.prototype.forEach.call(document.querySelectorAll("#ddBusinessCategory :checked"), function(el) { el.selected = false });

IE7、IE6、FF3以前をサポートしたい場合、または読みやすいと感じた場合は、Chaseの回答を使用してください。

于 2012-10-09T15:19:09.247 に答える
1

選択したオプションのみをループしたい場合は、while ループをお勧めします。

var elements = document.getElementById("ddBusinessCategory").selectedOptions;
while (elements.length > 0)
{
    elements[0].selected = false;
}

Michel Sahli による回答は、複数の選択がある場合は機能しません。これは、for ループを進めると値がelements.length変化するためです。

そうは言っても、 .selectedOptions 属性は少し面倒です ( Is selectedOptions が壊れているか...?を参照してください) ので、選択したオプションのみをループするだけで得られるわずかな節約にはおそらく価値がありません。

于 2015-05-21T00:23:53.267 に答える
0

オブジェクト内の DOM からオプション要素を選択したら、(すべてにクラス名があるふりをします) 属性を削除するだけです:

答え：

options = document.getElementsByClassName('optionsClassName');

for (let i = 0; i < options.length; i++) {
  options[i].removeAttribute('selected');
}

理由: HTML は、選択された属性が存在するかどうかを確認するために読み取ります。値のない属性として「選択」するだけで、オプションが選択されていると見なされます。したがって、属性を削除すると機能します。選択すると、新しい「選択された」属性が挿入されます。心配ない。

于 2020-05-25T18:47:50.657 に答える