【Javascript/フォーム選択】|| セレクトボックスの初期値をページによって変更したい時に役立つJS

【主な用途】
・採用応募フォーム(モーダル表示)など

 

 

最近は、Vue.jsを触らなきゃ…アウトプットしなきゃ…
と焦っているのが、直近ゴミ記事が量産されている原因となっております。

 

という訳で、今回はちゃんとします。

採用サイトのフォームで使える
JSテクニックです。

 

【使用例】
コーポレートサイトで、応募職種の初期値を
ユーザーが見ているページに合わせて変更したいとき(モーダルに限る)

 

JS

HTML

【解説】
var title = document.getElementById(‘title’).textContent
// タイトルを取得
target = document.querySelector(‘select.jobs option[value=”‘+ title +'”]’);
// select.jobs optionのvalueのtitleを取得
target.selected = true;
// targetにselected属性を付与

こうすれば、タイトルが「フロントエンドエンジニア」のページを閲覧している
応募者に対しては、フロントエンドエンジニアをselectの初期値にすることが可能です。

  • このエントリーをはてなブックマークに追加