質問: $('option:selected').val(); }); セレクトタグが変更された場合の取得までは何とか分かったのですが、 リンクに追加していく方法がわかりません。 拙いコードで申し訳ございませんが、よろしくお願いいたします。
回答: こんにちは ご質問のコードで JQueryをお使いだったので、この回答でもJQueryを使います。また、ご質問にあるリンク先のドメインを example.com に修正してあります。 select のうちのどれかひとつでも選択値が変更されたら、すべてのselect の選択された値を集めてきて、Query Stringを作り、それを付加したURLでリンクのhrefを更新すればよいかと思います。 すなわち、大枠はこういうことになります。 ``` $('select').change(function() { // (1) すべてのselect の選択値を集めてQuery Stringを作る。 // (2) 作ったQuery Stringでリンクのhrefを更新する。 }); ``` 以下は、上記の (1)、(2) のコード例です。 #### (1) すべてのselect の選択値を集めてQuery Stringを作る。 たとえば以下でできます。 ``` const qs = $('select').map(function() { return `${$(this).attr('name')}=${$(this).val()}`; }).get().join('&'); ``` 上記によって `qs` には `date=20200801&person=2&room=2` といった文字列が入ります。 #### (2) 作ったQuery Stringでリンクのhrefを更新する。 (1)で作った`qs`を使ってリンクのhref属性を更新します。 ``` const href = `https://example.com/?all=0&${qs}`; $('#link').attr({ href }); ``` 全体のサンプルを以下に上げておきます。 * **動作確認用CodePen:**