在页面更改后保持选中的下拉列表中的选项答案

【问题标题】：Keeping chosen option on dropdown selected after page change在页面更改后保持选中的下拉列表中的选项
【发布时间】：2013-03-30 13:01:00
【问题描述】：

因此，我构建了我的第一个响应式网站，但移动设备上的菜单存在问题。这一切都有效，因此当您使用移动设备时，您可以从下拉列表中选择一个选项（下面的 HTML），它会将您带到正确的页面。但是，当页面加载时，它默认返回“主页”，这是列表中的第一个选项。

这意味着当您在另一个页面上时无法选择主页。但是，我需要的是选择该选项并选择一个选择的新页面加载然后成为默认选项。因此，您可以使用下拉菜单返回主页。

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

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 在移动设备上启用下拉菜单。

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

【问题讨论】：

标签： javascript jquery html css responsive-design

【解决方案1】：

这可能会有所帮助：

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

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

【讨论】：

非常感谢。路径名比 href 更有效，因为它不需要获取整个 URL。我会更新答案。再次感谢！

【解决方案2】：

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

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

【讨论】：

这是否意味着我必须为下拉列表中的每个选项做一个 if 语句？
是的。或者如果您的值与 URL 相同，则可以使用 $("#mobile_nav select").val(document.URL);

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

<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>

【讨论】：