javascript - 刷新窗口后下拉列表不保持选中状态

Question

我有一个下拉列表，如下所示：

    <select class="span2" id ="sort" name= "order_by">
           <option >Default</option>
           <option >Price</option>
           <option >Color</option>
    </select>

我对此有更改事件处理程序：

$('select#sort').change(

  function(){       
    $(this).closest('form').trigger('submit');
  });

当我从下拉列表中选择价格时，价格应保持选中状态，但刷新窗口后不会发生。我正在使用 ruby​​ on rails 。

我不知道这里发生了什么。

有没有人可以指导我？

谢谢

Answer 1

您可以使用以下（Javascript/jQuery 解决方案）：

$(document).ready(function(){
    var selected_val = localStorage.getItem("sort");
    $("#sort").val(selected_val);//This would set the value from local-storage as selected value

    $("#sort").change(function(){
       var selected =  $("#sort").val();
       localStorage.setItem("sort", selected);//Setting the selected value in localstorage
       $(this).closest('form').trigger('submit');
    });
});

请注意：如果您通过数据库进行填充，那么在呈现页面模板时，您应该添加selected属性然后添加该特定值作为本地存储值。

希望你能明白。

Answer 2

使用 Rails select_tag 助手而不是 javascript

<%= select_tag(:order_by, options_for_select([['Default', 'Default'], ['Price', 'Price'], ['Color', 'Color']], selected: params[:order_by] )) %>

Answer 3

您必须将值存储在服务器端的任何位置，因此当页面重新呈现时，值会根据所选值自动选择