JavaScript 選択オプションを変更する

今日の記事では、JavaScript の Select 要素の選択されたオプションを変更する方法を学びます。

JavaScript で選択したオプションを変更する

JavaScript には、目的のセレクターまたはセレクターのセットに適合するドキュメント内のプライマリ要素を返す組み込みの Document querySelector() メソッドが用意されています。一致するものが見つからない場合は、Null が返されます。

構文：

querySelector(selectors)

selectors は、必須のパラメーターである文字列です。この文字列には、一致させる必要のある 1つ以上のセレクターが含まれています。

この文字列は、有効な CSS セレクター文字列である必要があります。そうでない場合は、SyntaxError 例外がスローされます。セレクターとその管理方法の詳細については、.querySelector() を参照してください。

この JavaScript メソッドは、指定された CSS セレクターのセットに一致するドキュメントの最初の要素を表す Element オブジェクトを返すか、一致するものがない場合は null を返します。

例を挙げて理解しましょう。

<select id="city">
  <option value="mumbai" selected>Mumbai</option>
  <option value="goa">Goa</option>
  <option value="delhi">Delhi</option>
</select>

const selectedValue = 'goa';
document.querySelector('#city [value="' + selectedValue + '"]').selected = true;

上記の例では、優先する場所を選択するための選択ドロップダウンを定義しています。デフォルトの優先ロケーションが Mumbai であるとします。

querySelector() メソッドを使用して、選択した値を true に設定し、デフォルトの場所を goa に選択できます。選択された属性はブール値を受け入れます。

上記のコードスニペットを JavaScript をサポートする任意のブラウザーで実行すると、以下の結果が表示されます。

出力：

デモ