JavaScriptのメソッドと使い方

JavaScriptのメソッドと使い方

セレクトボックスなどで選択したvalueの取得(e.target.valueの使い方)

[html]

<select class="search_form" name="q[fish_kind_eq]" id="q_fish_kind_eq">
  <option value="">魚の種類(必須)</option>
  <option value="アジ">アジ</option>
  <option value="マメアジ">マメアジ</option>
  <option value="イカ">イカ</option>
  <option value="サバ">サバ</option>
  <option value="マハゼ">マハゼ</option>
  <option value="カサゴ">カサゴ</option>
  <option value="タチウオ">タチウオ</option>
  <option value="カワハギ">カワハギ</option>
  <option value="イシモチ">イシモチ</option>
  <option value="メジナ">メジナ</option>
  <option value="タコ">タコ</option>
</select>

[JavaScript]

const genreSelect = document.getElementById('q_fish_kind_eq');

genreSelect.addEventListener('change', (e) => {
 console.log(e.target.value);
})

# セレクトボックスで[アジ]を選択した時の実行結果
=> アジ

# セレクトボックスで[タコ]を選択した時の実行結果
=> タコ

# セレクトボックスで[魚の種類(必須)]を選択した時の実行結果
=> 

上記より[e.target.value]は、セレクトボックスで選択したvalueの値を取得できる。

取得したDOMの子要素を削除する方法(innerHTMLの使い方)

[HTML]

<select class="search_form" name="q[handle_pattern_eq]" id="q_handle_pattern_eq">
  <option value="">捌き方(任意)</option>
  <option value="背開き+ゼイゴの処理">背開き+ゼイゴの処理</option>
  <option value="3枚おろし+ゼイゴの処理">3枚おろし+ゼイゴの処理</option>
  <option value="内臓処理+ゼイゴの処理">内臓処理+ゼイゴの処理</option>
  <option value="3枚おろし+ゼイゴの処理+骨の処理+皮を剥ぐ">3枚おろし+ゼイゴの処理+骨の処理+皮を剥ぐ</option>
  <option value="3枚おろし+ゼイゴの処理+骨の処理">3枚おろし+ゼイゴの処理+骨の処理</option>
</select>

[JavaScript]

const selectHandlePattern = document.getElementById('q_handle_pattern_eq');
selectHandlePattern.innerHTML = '';

上記のように記述すると[selectHandlePattern]の子要素であるセレクトボックス内の[option]要素が全て削除される。

参考記事

JavaScriptでセレクトボックスの値を動的に生成する方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン

JavaScriptでDOM操作で要素を削除する方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン