在jQuery Mobile中选择活动选项

问题描述：

我的应用程序的移动页面有一个包含jQuery Mobile下拉列表的选择菜单列表，如下所示。在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>

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

我的猜测是，我需要

＃1标志，它的选择是 “积极的”，然后

＃2确保已通过JavaScript在selectmenu激活。

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

我可以为低于1做＃，但它是很丑陋

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

至于＃2，我不知道最好的办法是选择它的。

希望你的意见！

答

为什么不只是使用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>

这会使“组1”成为页面加载时的选定选项。你只需要弄清楚哪个选项会得到这个属性。但是在Ruby方面应该很容易。

谢谢@Steve，这是完美的。你能通过ruby来扩展吗？我正在考虑在'value'和'selected value'之间的if/else会非常混乱。有没有更好的方法来做到这一点？ – umezo 2013-03-21 14:10:13

答

只要添加到@ 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中选择活动选项

相关推荐