在html中重新加载页面时保留下拉选择答案

【问题标题】：retaining dropdown selection on page reload in html在html中重新加载页面时保留下拉选择
【发布时间】：2016-12-03 10:49:20
【问题描述】：

我在这样的页面上有一个下拉列表：

<div id="dropdowndosen-lvl1" class="panel-collapse collapse">
    <div class="panel-body">
        <ul class="nav navbar-nav">
            <li class="active" id="btntab5" runat="server"><a href="Add Dosen.aspx"><span class="glyphicon glyphicon-plus"></span> Add Dosen</a></li>
            <li id="btntab6" runat="server"><a href="Data Dosen.aspx"><span class="glyphicon glyphicon-file"></span> Data Dosen</a></li>
        </ul>
    </div>
</div>

Picture 1

当用户进行选择时，当前页面会像这样Picture 2 刷新，但是如何在页面刷新后保持用户的选择在列表中可见？换句话说，我不希望列表回滚到其默认选定值。

请帮帮我。

【问题讨论】：

向我们展示您到目前为止所做的尝试

标签： javascript jquery html

【解决方案1】：

试试这个例子首先从列表中选择汽车，然后单击“选择”按钮重新加载页面或关闭并再次打开后，您在第一部分中选择的汽车具有橙色背景

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
  function getname(){
    var car = document.getElementById("cars").value;
    localStorage.cars = car;
    document.getElementById("result").innerHTML=localStorage.cars;
  }

  function colorize(){
    document.getElementById(localStorage.cars).style.background = "orange";
  }
  </script>
</head>
<body onload="colorize()">
  <select name="cars" id="cars">
    <option id="volvo" value="volvo">Volvo</option>
    <option id="saab" value="saab">Saab</option>
    <option id="fiat" value="fiat">Fiat</option>
    <option id="audi" value="audi">Audi</option>
  </select>
  <button onclick="getname()">choose</button>
  <hr>
  <a id="result"></a>
</body>
</html>

【讨论】：

【解决方案2】：

您可以通过获取 URL 路径并选择在其 href 中具有该路径的适当 a 标记并将其父类 li 设置为 active 来做到这一点。

示例代码如下。

   $(function(){
         $('ul.nav').find('li').removeClass('active'); // to remove hardcoded active class
         var activeAnchor = $('ul.nav').find('a[href="' + location.pathname + location.search + '"]');
         $(activeAnchor ).parent('li').addClass('active');

         //below script is if at all you have sub menus too
         if ($(activeAnchor).closest(".submenu").length > 0) {
           $(activeAnchor).closest('ul').parent('li').addClass('active').addClass('open').closest('ul').parent('li').addClass('open');
           $(activeAnchor).parent('li').addClass('active');
           $(activeAnchor).closest('ul').removeAttr('style').removeClass('nav-hide');
          }             
   });

【讨论】：

你能用html给我更多的解释吗？对不起，我还是 html 的新手