JavaScript で現在選択されているオプション

Web ページにはさまざまなタイプのフォームを含めることができ、各フィールドは特定のタイプです。ドロップダウンリストからオプションを選択する必要がある場合があります。<select> 要素は、ドロップダウンリストを作成するために使用されます。<select> タグ内の <option> タグは、ドロップダウンリストのオプションを定義するために使用されます。

このチュートリアルでは、JavaScript を使用して <select> 要素で現在選択されているオプションを取得する方法を紹介します。

HTMLSelectElement.options を使用して、JavaScript を使用して選択リストから現在のオプションを取得する

HTMLSelectElement.options プロパティは、<select> 要素に存在する <option> 要素の HtmlOptionsCollections を返します。

リストから選択したオプションの値を表示する関数を作成できます。

以下のコードを確認してください

HTML コード：

<select id="cars" onchange="select()">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

JavaScript コード：

var selection = document.getElementById('cars');
function select() {
  alert(selection.options[selection.selectedIndex].value);
}

selectedIndex は、選択されたオプションのインデックスを返します。

HTMLSelectElement.selectedOptions を使用して、JavaScript を使用して選択リストから現在のオプションを取得する

この HTMLSelectElement.selectedOptions には、選択された <select> 要素で定義されているすべての <option> 要素のリストが含まれています。

以下のコードを確認してください。

HTML コード：

<select id="cars" onchange="select()">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

JavaScript コード：

var selection = document.getElementById('cars');
function select() {
  alert(selection.selectedOptions[0].value);
}

この方法は通常、Internet Explorer では機能しません。