页面更改后保留所选下拉选项

因此，我构建了我的第一个响应网站，但在移动设备上遇到菜单问题。这一切都有效，因此，当您使用手机时，您可以从下拉列表中选择一个选项（下面的HTML），它会带您离开正确的页面。然而，当页面加载时，默认回到'Home'列表中的第一个选项。页面更改后保留所选下拉选项

这意味着当您在另一页上时不能选择家庭。但是我需要的是选择该选项并为所选的那个加载新页面，然后成为默认选项。所以你可以使用下拉菜单回到主页。

我以前没有这样做过，所以希望它很简单！

HTML：

<form id="mobile_nav"> 
      <select id="mobile_menu"> 

<option value="/">Home</option>   
<option value="/page 1/">page 1</option> 
<option value="/page 2/">page 2</option> 
<option value="/page 3/"page 3</option> 
<option value="/page 4/"page 4</option> 
<option value="/page 5/"page 5</option> 

      </select> 
</form>

JS：

jQuery(document).ready(function() { 
     nav(); 

      jQuery("#mobile_menu").val(location.pathname); 

     jQuery("#mobile_menu").change(function() { 
      document.location = jQuery(this).val(); 
     });

的JS使移动设备上的下拉菜单。

让我知道你是否需要任何信息和谢谢。

来源

2013-04-08 Josh Davies

这可能帮助：

jQuery(document).ready(function(){ 
    jQuery("#mobile_menu").val(location.pathname) 
});

这将尝试设置的#mobile_menu相同的位置（当前URL）的路径部分的价值。

来源

2013-04-08 12:41:31

非常感谢。路径名比href工作得更好，因为它不需要获取整个URL。我会更新答案。再次感谢！ – 2013-04-08 14:27:59

您可以使用document.URL知道当前的URL。将此URL与下拉列表中的值进行比较，您可以在页面加载时选择相应的选项。例如。您可以使用类似这样的方法：

var currentURL = document.URL; 
if (currentURL.indexOf("home")) 
{ 
    $("#mobile_nav select").val("home"); 
}

来源

2013-04-08 12:41:28

这是否意味着我将不得不在下拉菜单中为每个选项做if语句？ – 2013-04-08 14:03:37

是的。或者如果您的值与URL相同，则可以使用'$（“＃mobile_nav select”）。val（document.URL）;' – 2013-04-09 04:51:44

使用window.location.href来获得当前位置，并选择

jQuery(document).ready(function(){ 
    jQuery("#mobile_menu").val(window.location.href); 
});

来源

2013-04-08 12:42:27 bipen

我在这方面的知识已经过时，但是这可能会带来一些想法（我希望）。

<head> 
    <script> 
    function makeDefault(elm) { 
     elm.options[elm.selectedIndex].selected = 'selected'; 
     alert(elm.innerHTML); 
    } 
    </script> 
</head> 
<body> 
    <form id="mobile_nav"> 
    <select id="mobile_menu" onchange="makeDefault(this)"> 
     <option value="/">Home</option>   
     <option value="/page 1/">page 1</option> 
     <option value="/page 2/" selected='selected'>page 2</option> 
    </select> 
    </form> 
</body>

来源

2013-04-08 13:07:09 seeker

页面更改后保留所选下拉选项

回答

相关问题