複数のセレクトボックスを選択し、その入力内容によりリンク先の変更

セレクトボックスを2つ組み合わせて、その入力内容により、リンク先を変更させるシステムを構築したいです。

現段階で、ここまでできているのですが、
リンク先の指定、及びリンクさせるjavascriptがうまくかけません。

html
1<select name="area_tag" id="area">
2<option value="">日付選択</option>
3<option value="a">dateA</option>
4<option value="b">dateB</option>
5<option value="c">dateC</option>
6<option value="d">dateD</option>
7<option value="e">dateE</option>
8</select>
9
10<select name="person" id="person">
11<option value="">カテゴリー</option>
12<option value="z1">1部屋</option>
13<option value="z2">2部屋</option>
14<option value="z3">3部屋</option>
15</select>
16
17        <div class="l-flex">
18            <a type="button" value="check" id="btn">検索する</a>
19            <div id="view"></div>
20          </div>

javascript
1         <script>
2              window.addEventListener('DOMContentLoaded', ()=>{
3              document.querySelector('#btn').addEventListener('click',e=>{
4              var url="https://example.com";
5              var s=[...document.querySelectorAll('select')].filter(x=>{
6                return x.value!=="";
7              }).map(x=>{
8                return "/"+encodeURIComponent(x.value)+"/";
9              });
10              if(s.length>0) s=s;
11              document.querySelector('#view').textContent=url+s;
12            });
13          });
14          </script>

ここでようやく、https://example.com/a/,/z1/ などを出力できるようになりました。
これをhttps://example.com/a/z1/のような形で出力し、
それをリンクとして、別ページにリンクしたいです。
(現在wordpressでサイトを構築しています。)

ご教授いただけましたら幸いです。

Lhankor_Mhy

2020/04/07 00:23

if(s.length>0) s=s; ↑これはどういう意図のコードですか？

arraky

2020/04/07 01:11

できそうなコードを参照して、それを削除していったらこういうかたちになりました。なにか特別な意図があるわけではありません。（まだ初心者なので、申し訳ございません。）

Lhankor_Mhy

2020/04/07 01:19

わかりました。それは特に意味のないコードだと思いますので、削除していいと思います。

行動規範の内容に同意します

回答1件

ベストアンサー

試していませんが、

js
1              var url="https://example.com/";
2              var s=[...document.querySelectorAll('select')].filter(x=>{
3                return x.value!=="";
4              }).map(x=>{
5                return encodeURIComponent(x.value)+"/";
6              }).join('');