Edited at

選択したリンクによってformの初期値を変更する


やりたいこと

リンクをクリックしたら、それに応じてセレクトボックスの初期値を変更したい


実装

今回はそのリンク先にdata-form-typeを書いて値を設定。その値がセレクトボックスのvalueとなるようにした。

data-form-typeで設定しているがjsでvalueをセットするときはselecteSchedule.val(formType)になるので注意。

<div class="link">

<a href="#form" data-form-type="a">AAA</a>
<a href="#form" data-form-type="b">BBB</a>
<a href="#form" data-form-type="c">CCC</a>
</div>

<form id="form">
<select name="参加希望日" size="1" value="" class="selector">
<option value="">選択してください</option>
<option value="a">AAA</option>
<option value="b">BBB</option>
<option value="c">CCC</option>
</select>
</form>

(function($){

const links = $(".link > a");
links.each(function() {
$(this).on("click", function(e) {
const formType = $(this).data("formType");
const selecteSchedule = $(".selector");
selecteSchedule.val(formType);
})
})
})(jQuery)