3つのselectでURLパラメータを取得する方法

すみません、web作成している者です、困っておりますのでＨＥＬＰです！
3つのselectでURLパラメータを取得する方法

例えばhttp://www.xxx.co.jp/yyy.htmlと言うページを用意して
selectで赤・丸・山田を選択したらURLが
http://www.xxx.co.jp/yyy.html?color=red&name=cir …を開くように
したいです。
ご教授頂ければ幸いです。

<form id="search" name="search">
色を選択 <select id="color" name="color">
<option value="">指定しない</option>
<option value="red">赤</option>
<option value="blue">青</option>
<option value="green">緑</option>
</select>

形を選択 <select id="type" name="type">
<option value="">指定しない</option>
<option value="square">四角</option>
<option value="circle">丸</option>
</select>

人を選択 <select id="human" name="human">
<option value="">指定しない</option>
<option value="yamada">山田</option>
<option value="tanaka">田中</option>
</select>
</form>

No.1 回答者： fujillin 回答日時： 2018/01/10 09:24

こんにちは

＞～～?color=red&name=circle&human=yamada
HTMLソースの方は
～～?color=red&type=circle&human=yamada
を意図しているようなので、そのままにしてありますが・・・
以下ではどうでしょうか？
（自分自身を開くのなら、action属性は省略しても同様となります）

<form id="search" name="search" method="GET" action="http://www.xxx.co.jp/yyy.html">
色を選択 <select id="color" name="color">
<option value="">指定しない</option>
<option value="red">赤</option>
<option value="blue">青</option>
<option value="green">緑</option>
</select>

形を選択 <select id="type" name="type">
<option value="">指定しない</option>
<option value="square">四角</option>
<option value="circle">丸</option>
</select>

人を選択 <select id="human" name="human">
<option value="">指定しない</option>
<option value="yamada">山田</option>
<option value="tanaka">田中</option>
</select>

<p>
<input type="submit" value="送信" />
</form>

No.2 回答者： Ogre7077 回答日時： 2018/01/10 15:50

No.1 の回答のように、単純にフォーム送信すればよいと思いますが、

送信ボタンを押すひと手間も省きたいのであれば、以下の処理を加えてはいかがでしょうか。

<form> に change イベントを実装する
https://developer.mozilla.org/ja/docs/Web/API/Ev …

change 発生時に、
三つの <select> を読み取って値が揃っていれば
https://html.spec.whatwg.org/multipage/form-elem …

<form> 内容を送信する
https://developer.mozilla.org/ja/docs/Web/API/HT …