在页面更改后将选择的选项保留在下拉菜单中

Keeping chosen option on dropdown selected after page change

本文关键字：选项 保留 下拉菜单 选择      更新时间：2023-09-26

所以我已经建立了我的第一个响应式网站，但在移动设备上的菜单有问题。当你使用手机时，你可以从下拉菜单中选择一个选项(下面的HTML)，它会把你带到正确的页面。然而，当页面加载时，它默认返回'Home'，这是列表中的第一个选项。

这意味着当你在另一个页面时，你不能选择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在移动设备上启用下拉菜单。

如果你需要更多的信息，请告诉我，谢谢。

这可能有帮助:

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

这将尝试将#mobile_menu的值设置为与location(当前URL)的路径部分相同。

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

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

使用window.location.href获取当前位置并选择

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

我在那方面的知识已经过时了，但这可能会带来一些想法(我希望)。

<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>
相关文章：