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

标签 javascript jquery html

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

<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 ,但是如何在页面刷新后保持用户的选择在列表中可见?换句话说,我不希望列表回滚到其默认选定值。

请帮助我。

最佳答案

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

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

关于javascript - 在html中重新加载页面时保留下拉选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40946925/

相关文章:

javascript - 如何设置构造函数

javascript - @babel/eslint-parser 在 vue 文件上抛出错误

javascript - ‘提交’onload进入循环

javascript - 单击其他列表项时淡出

javascript - 删除部分动态图像

javascript - 如何使用数据 URI 将从 ApiController 检索到的内容绑定(bind)到 Angular 元素?

javascript - 如何发送 JSON 但期望使用 AJAX/JQuery 响应纯文本?

javascript - 如何在 JavaScript/jQuery 中弹出模式并运行复选框检查?

html - Chrome DevTools 尺寸与标尺或设备尺寸不匹配

javascript - 在循环中创建多个 Canvas ,仅调用最后一个函数