导航到另一个HTML页面后,如何在下拉列表中显示所选值?

时间:2018-07-25 10:38:20

标签: javascript jquery html dropdown

我的应用程序由4个角色组成,这些角色将在下拉菜单中。如果单击某个特定角色,它将导航到我提到的href链接。 我的问题是导航到第二个html页面后,该角色未在下拉列表中修复。它继续仅显示第一个值。        我的第一个html:

     <select name="loginuser" id="loginuser">
       <option value="dash.html">first</option>
       <option value="dash1.html">second</option>
       <option value="dash2.html">third</option>
     </select>

  jquery:
     <script>
         $("#loginuser").change(function () {
         url = this.value;
         if (url !== "") {
            window.location = url;
          }
         });
      <script>

我的第二个html文件:

        <select name="loginuser" id="loginuser">
       <option value="dash.html">first</option>
       <option value="dash1.html">second</option>
       <option value="dash2.html">third</option>
     </select>

  jquery:
     <script>
         $("#loginuser").change(function () {
         url = this.value;
         if (url !== "") {
            window.location = url;
          }
         });
      <script>

1 个答案:

答案 0 :(得分:0)

您的第二页应使用HTML所具有的简单标准显示所选的值。您可以通过某种方式将其存储或使用传递给URL的参数将其放置在页面服务器端,该选择在某种程度上是您如何传播该状态的选择。

$("#loginuser").change(function() {
  url = this.value;
  if (url !== "") {
    window.location = url;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="loginuser" id="loginuser">
  <option value="dash.html">first</option>
  <option value="dash1.html" selected="selected">second</option>
  <option value="dash2.html">third</option>
</select>

作为一种方法,您可以使用当前页面位置来设置所选内容。

$("#loginuser").change(function() {
  url = this.value;
  if (url !== "") {
    window.location = url;
  }
});
$(function() {
 let current = window.location.href;
  $('#loginuser').find('option').each(function() {
    let optionvalue = $(this).val();
    let current = window.location.href;
    console.log(current);
    let isThisPage =(current.indexOf(optionvalue) > -1);
    $(this).prop("selected", isThisPage);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="loginuser" id="loginuser">
  <option value="dash.html">first</option>
  <option value="dash1.html" selected="selected">second</option>
  <option value="dash2.html">third</option>
  <option value="stacksnippets.net">thispage</option>
</select>