複数のselectタグの値によって動的にリンクを指定する方法

Question

ページ制作初心者です。よろしくお願いいたします。

ページ内にselectタグが複数あり、selectの選択された値によって、最後に書かれているリンク先に値を追加したいです。

■HTML

<select name="date" id="date"> <option value="">日付選択</option> <option value="20200801">2020年8月1日(土)</option> <option value="20200802">2020年8月2日(日)</option> <option value="20200803">2020年8月3日(月)</option> <option value="20200804">2020年8月4日(火)</option> <option value="20200805">2020年8月5日(水)</option> </select> <select name="person" id="person"> <option value="">人数選択</option> <option value="1" >1人</option> <option value="2" >2人</option> <option value="3" >3人</option> <option value="4" >4人</option> <option value="5" >5人</option> </select> <select name="room" id="room"> <option value="">部屋数選択</option> <option value="1" >1部屋</option> <option value="2" >2部屋</option> <option value="3" >3部屋</option> <option value="4" >4部屋</option> <option value="5" >5部屋</option> </select> <p><a id="link" href="https://aaaa.co.jp/?all=0" target="_blank">詳細はこちら</a></p>

※例　2020年8月1日(土)、2人、2部屋と選択した場合に
id="link"　のリンクの値が、https://aaaa.co.jp/?all=0&date=20200801&person=2&room=2 となるようにしたい。

■jQuery

$('#date').change(function() {
var date_data = $('option:selected').val();
});

$('#person').change(function() {
var person_data = $('option:selected').val();
});

$('#room').change(function() {
var room_data = $('option:selected').val();
});

セレクトタグが変更された場合の取得までは何とか分かったのですが、
リンクに追加していく方法がわかりません。

拙いコードで申し訳ございませんが、よろしくお願いいたします。

Comments

[kei344]

例示用ドメインはご自身で所有されていない限り example.com, example.jp, example.co.jp など例示用に予約されたドメイン名を利用してください。 http://www.atmarkit.co.jp/fwin2k/win2ktips/801exampledom/exampledom.html https://blog.jxck.io/entries/2017-09-27/example-local-test-domains.html https://blog.ko31.com/201304/sample-domain-example/

Answer 1

こんにちは

ご質問のコードで 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: https://codepen.io/jun68ykt/pen/LYVKvEq?editors=1010

Comments

[__roku__]

ご回答いただき、誠にありがとうございます。
大変丁寧にご説明いただき、ありがとうございました。
いただいた、コードで実現することができました。
内容をきちんと調べて学習いたします。
大変困っておりましたので、とても助かりました。
ありがとうございます。

[jun68ykt]

どういたしまして。
> いただいた、コードで実現することができました。
とのことでよかったです????

Answer 2

流れ的にはこんな感じですかね？

• codepen

Comments

[__roku__]

ご回答いただき、誠にありがとうございます。
作成いただいた流れで間違いございません。
チェックをクリックした内容でそのままページを移動できると嬉しいです。