【javascript】Select要素を選択する

サンプルHTML

<form>
  <select name="pull-down" style="width:200px;">
    <option value="elephant">ゾウさん</option>
    <option value="lion">ライオンさん</option>
    <option value="penguin">ペンギンさん</option>
  </select>
</form>

サンプルjavascript

上記のサンプルHTMLで、「ペンギンさん」を選択するコードを記載します。

1行目：select[name=”pull-down”]配下のoptionを全て配列型に取得する。
2行目：配列の中から、選択したい項目をfind/match関数で検索し、選択する。

let OptionsList = document.querySelectorAll('select[name="pull-down"] option');
Array.from(OptionsList).find(ele => ele.text.match(/ペンギン/)).selected = true;

正規表現は、スラッシュ「 / 」で囲んで記述します。
その後に「g」などのオプションが続きます。

正規表現、オプションについては他サイトを参考にさせて頂きました。

JavaScript【match】文字列のマッチと正規表現 - プログラマカレッジ

String オブジェクトのmatch メソッドは、条件にマッチする文字列を検索するメソッドです。 今回は、m

programmercollege.jp