セレクトボックス選択時にページを遷移させたい

Question

$(function(){
    var selectOption = $("select#guiest_id1").next().find("ul");
    selectOption.on("click", "li", function(e){
      let pathname = location.pathname;
      let sortType = e.currentTarget.children[0].rel;
      $.get(pathname,{sort: sortType});
      console.log("クリックされました");
    });
  });

<select name="guiest_id1" id="guiest_id1" class="select-drop">
  <option value="NEW_PRODUCTS">新着順</option>
  <option value="LOW_PRICE"   >安い順</option>
  <option value="HIGH_PRICE"  >高い順</option>
  <option value="OLD_PEODUCTS">古い順</option>
</select>

セレクトボックスを選択、クリックしたタイミングで選択肢のrelの値をパラメーターとしてGETリクエストを行いページを遷移させたいと考えています。
コントローラーではparams[:sort]の形で値を使用したいです。

実際に選択を行うとコンソール上に"クリックされました"と表示されますが、
ページが遷移されません。

どうやら$.get(pathname,{sort: sortType});この部分に問題があるようなのですが、
改善できず、時間がかかっている為アドバイスなど頂けたらと思います。

Answer 1

$.get()はあくまで非同期通信（Ajax）の仕組みなので画面遷移を伴うことなく第1引数のパスにリクエストを送信してレスポンスを得ます。

提示されたHTMLにはrel属性がどこにも指定されてないので何を送るつもりなのか分かりませんが、「画面遷移で送信したい」のでしたら別途hiddenをform内に置き、SELECT選択時（clickよりchangeのほうが良いと思いますが）にそのhiddenに値を設定し、form.submitしたほうが良いと思います。

Comments

[arinc0]

$.getがAjaxの仕組みだと気づきませんでした...
教えていただきありがとうございます！

最終的にはchangeを用いてgetでページ遷移することができました。
ありがとうございました！

Answer 2

ページ遷移していいならformをsubmitしてください

Comments

[arinc0]

submitが必要だとコメントで気づきました、、、
勉強不足を痛感しました。
回答していただきありがとうございました！