遷移後にセレクトボックスの選択を維持したい

Question

$(function(){
    var selectOption = $("select#guiest_id1")
    selectOption.change(function(){
      $("form#submit_form").submit();
    });

    $("select#guiest_id1").next().find("ul").on("click", "li", 
    function(e){
      var selectedOption = e.currentTarget.children[0].rel;
      console.log($(`option[value=${selectedOption}]`));
      $("option[value=selectedOption]").prop("selected", true);
    });
  });

<select name="sort" id="guiest_id1" class="select-drop" sb="10928896" style="display: none;">
  <option value="NEW_PRODUCTS">新着順</option>
  <option value="LOW_PRICE">安い順</option>
  <option value="HIGH_PRICE">高い順</option>
  <option value="OLD_PEODUCTS">古い順</option>
</select>

<form id="submit_form", method="get", action="<%=potepan_category_path(@taxon.id)%>">
  <select name="sort" 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>
</form>

changeでセレクトボックスを選択と同時にGETリクエストでページが遷移し並び替えを行うことは成功しましたが、セレクトボックスの位置が初期状態に戻ってしまいます。
初期状態に戻ってしまうと今が何順で並んでいるかが分からなくなってしまう為、遷移前に選択した値を記憶し遷移後にoptionタグをselectedの状態にしたいと考えております。

onclickでクリックした要素のvalueの値は取得できそうなので
$("option[value=selectedOption]").prop("selected", true);
のようにしてみましたが上手くいきません。

遷移前に選択したoptionが遷移後にselectedの状態になっているように実装したいです。
お手数ですがアドバイスなど頂けたらと思います。

Answer 1

web アプリは基本的にステートレスなので遷移元と遷移先の間でデータを共有するにはそのための仕組みを利用する必要があります。

Ruby は分かりませんが、例えば ASP.NET Web アプリなら Session というフレームワーク組み込みの仕組みが用意されています。Ruby にそういう仕組みがないか調べてみてください。

そういうフレームワーク独自の仕組みが無くても、クッキーとか、隠しフィールドとか、クエリ文字列などを使うことができます。

例えばクエリ文字列を使うことを考えてみます。

form を method="get" で action="<%=potepan_category_path(@taxon.id)%>" で指定される URL に submit しているのですよね？

であれば、select 要素の name 属性と、選択した option の value 属性の値がクエリ文字列に設定されて送信されます。具体的には、例えば、form の action 属性が http://example.com/index になるとなるとして、「新着順」を選んで form をsubmit したのであれば、

GET http://ezample.com/index?sort=NEW_PRODUCTS

という要求がサーバーに送られます。

Ruby でもたぶん送信されてきたクエリ文字列をサーバーで取得する手段は用意されているはずなので、クエリ文字列の sort に設定された NEW_PRODUCTS を取得して、それを要求を受けた http://example.com/index レンダリングする際にその中に反映すれば良いと思います。

Comments

[arinc0]

わかりやすく説明していただきありがとうございます！
クエリ文字列を使用する方法しか思いつきませんでしたが、他にも方法があるのですね。
他の方法についても調べてみたいと思います！
ありがとうございました！

Answer 2

Rubyわかりませんけど、form送信しているならgetでもpostでもリクエストがサーバーに送信されているはずなので、そのリクエストをサーバー側で受け取って値によってselectedを与えれば良いと思います。
どちらかというとJavaScriptの役割ではないです。

Comments

[arinc0]

Javascriptの役割についてもっと理解を深めたいと思います。
回答ありがとうございました！

Answer 3

    <option value="NEW_PRODUCTS">新着順</option>
    <option value="LOW_PRICE"   >安い順</option>
    <option value="HIGH_PRICE"  >高い順</option>
    <option value="OLD_PEODUCTS">古い順</option>
  </select>

とベタに書いてしまうと rails っぽくないですし、今回の問題がやりにくいですね。select_tag と options_for_select(container, selected = nil) を使うと楽にできます。
<%= select_tag :name,
options_for_select([["新着順","NEW_PRODUCTS"],....],@name) %>
として、渡ってきた値を @name に入れて渡せば良いです。

選択肢はviewに書かず、controllerやmodelに定義しておくほうが、ごちゃごちゃしがちなviewが読みやすくなるので、私はそうしています。

Comments

[arinc0]

select_tag と options_for_selectについて、特にoptions_for_selectですがselected状態を設定することができるのはとても勉強になりました。コードも短くできそうでとても助かりました。
回答ありがとうございます！