【主な用途】
・採用応募フォーム（モーダル表示）など
最近は、Vue.jsを触らなきゃ…アウトプットしなきゃ…
と焦っているのが、直近ゴミ記事が量産されている原因となっております。
という訳で、今回はちゃんとします。
採用サイトのフォームで使える
JSテクニックです。
【使用例】
コーポレートサイトで、応募職種の初期値を
ユーザーが見ているページに合わせて変更したいとき（モーダルに限る）
JS
|
1 2 3 |
var title = document.getElementById('title').textContent, target = document.querySelector('select.jobs option[value="'+ title +'"]'); target.selected = true; |
HTML
|
1 2 3 4 5 |
<div id="title">フロントエンドエンジニア</div> <select class="jobs"> <option value="">選択してください</option> <option value="フロントエンドエンジニア">フロントエンドエンジニア</option> </select> |
【解説】
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の初期値にすることが可能です。
