複数のセレクトボックスを監視し、選択が変更される度hrefの内容を書き換えたい。

Question

###前提・実現したいこと
お世話になります。
下記のような二つのセレクトボックスとリンクがあったとして、
セレクトボックスの選択が変更される度に対応するvalue値をリンクのURLパラメータに入れたいのですが、jQueryをどう書けばよいかわかりません。

【動きのイメージ】
・ページ読み込み時、URLパラメータはセレクトボックスの最初の値が既に入っている。
（例でいうとセレクトボックスはIと赤が選択されている状態で、URLパラメータはnumber=111&color=red）
・ユーザーがnumberのセレクトボックスをIIに変更した際、URLパラメータはnumber=222&color=redとなる。
※同様にcolorが変更された場合はcolorのパラメータのみが変わる。

【HTML】
<select id="number">

<option value="111">I</option> <option value="222">II</option> <option value="333">III</option> </select> <select id="color" name="color"> <option value="red">赤</option> <option value="blue">青</option> <option value="white">白</option> </select> <a class="test" href="http://hoge.hoge/?number=&color=">test</a>

###試したこと
jQueryの.replaceを使おうとしましたが、複数のセレクトボックスを対象とする場合のコードがよくわかりませんでした。

Answer 1

すなおにやればこんな感じでは？

$(function(){
  var href="http://hoge.hoge/";
  $('#number,#color').on('change',function(){
    var number=$('#number').val();
    var color=$('#color').val();
    $('#test').prop('href',href+"?number="+number+"&color="+color);
  });
});

<select id="number">
<option value="111">I</option>
<option value="222">II</option>
<option value="333">III</option>
</select>
<select id="color" name="color">
<option value="red">赤</option>
<option value="blue">青</option>
<option value="white">白</option>
</select>
<a id="test" href="http://hoge.hoge/?number=&color=">test</a> 

Comments

[mikankkk]

yambejp様
早速のご返信ありがとうございます！
コード確認させていただきました。思い通りの動きになりそうです！
ただ当方の環境では最初に読み込んだ時のURLのパラメータが「number=&color=」のように値が入っていない状態になってしまいます・・・。
大変恐れ入りますが、解決方法をお教えいただけないでしょうか？

[yambejp]

もしかして、load時には初期で選ばれているnumberとcolorを反映したかったですか？
もしそうならtriggerでchangeをよんでやればいいでしょう

$(function(){
var href="http://hoge.hoge/";
$('#number,#color').on('change',function(){
var number=$('#number').val();
var color=$('#color').val();
$('#test').prop('href',href+"?number="+number+"&color="+color);
}).trigger('change'); //←ココ
});

[mikankkk]

yambejp様

すいません、自己解決できました！
この度はありがとうございます。

[mikankkk]

yambejp様

ご連絡ありがとうございます。
教えていただいたコードですべてうまくいきました！
感謝いたします！！