Question

我的应用的移动页面有一个标题，其中包含如下所示的jQuery Mobile下拉菜单列表。

<span data-role="fieldcontain" id="category-dropdown">
  <select name="select-native-2" id="select-native-2" data-mini="true">
    <option value="<%= root_path %>">Home</option>
    <option value="<%= newest_path %>">New</option>    
    <option value="<%= group_path(Group.find(1)) %>">Group 1</option>
    <option value="<%= group_path(Group.find(2)) %>">Group 2</option>
    <option value="<%= group_path(Group.find(3)) %>">Group 3</option>
  </select>
</span>

我正在使用下面的Javascript导航到所选的页面。

<script type="text/javascript">
$(document).ready(function() {
  $("#select-native-2").change(function(){
    if ($(this).val()!='') {
      window.location.href=$(this).val();
    }
  });
});
</script>

我的问题是，当用户重定向到另一个页面时，选择菜单会默认返回第一个选项（“主页”）。如何使选择菜单反映当前页面？

我的猜测是我需要

＃1标记哪个选项为“有效”，然后

＃2确保通过javascript 在selectmenu上激活。

做这两件事的最佳方法是什么？

我可以如下所示＃1 ，但这很难看

<option value="<%= root_path %>" id="<%= "active" if params[:controller] == "links" && params[:action] == "index" %>">

至于＃2，我不确定选择它的最佳方法是什么。

非常感谢您的投入！

Answer 1

为什么不使用selected属性？

<span data-role="fieldcontain" id="category-dropdown">
  <select name="select-native-2" id="select-native-2" data-mini="true">
    <option value="<%= root_path %>">Home</option>
    <option value="<%= newest_path %>">New</option>    
    <option selected value="<%= group_path(Group.find(1)) %>">Group 1</option>
    <option value="<%= group_path(Group.find(2)) %>">Group 2</option>
    <option value="<%= group_path(Group.find(3)) %>">Group 3</option>
  </select>
</span>

这会使“Group 1”成为页面加载时的选定选项。您只需要确定哪个选项将获得此属性。但是在Ruby方面这应该很容易做到。

Answer 2

为了添加@ Steve的解决方案，我写了一个帮助来帮助选择当前页面。

def is_selected?(action, name)
  if params[:controller] == "links" # this is the controller for my root and newest paths
    "selected" if params[:action] == action
  elsif params[:controller] == "groups"
    "selected" if @group.name == name
  end
end

在jQuery Mobile中选择活动选项

2 个答案: