選択したリンクによって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)