在下拉菜单中维护选定的值

Question

我有一个按预期工作的AJAX调用填充的级联下拉菜单。 但是，当我提交表单并刷新页面时，所选值将重置。 提交表单并刷新页面后，我希望能够在其下拉框中保留选定的值。

我已经在Stack Overflow上找到了几种解决方案，但是似乎找不到一种解决方案来显示如何维护从动态填充选项的表单中选择的值。

我的HTML和JS在下面。

<form method="get" class='d-print-none' id='gameForm' team-ids-url={% url 'ajax_load_teamids' %} game-ids-url={% url 'ajax_load_gameids' %} novalidate>
<div class="input-group">
<select class="custom-select" id="inputTeamId" name="inputteamid"></select>
<select class="custom-select" id="inputGameId" name="inputgameid"></select>
<div class="input-group-append">
  <button class="btn btn-outline-secondary" type="submit" value="submit" onclick="loading();">Run</button>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function() {
var url = $("#gameForm").attr("team-ids-url");
$.ajax({
  url: url,
  success: function(data) {
    $("#inputTeamId").html(data);
  }
});
});
$("#inputTeamId").change(function() {
var url = $("#gameForm").attr("game-ids-url");
var selected_teamid = $(this).val();
localStorage.setItem("SelectedTeamId", selected_teamid);
$.ajax({
  url: url,
  data: {
    'selected_teamid':selected_teamid
  },
  success: function (data) {
    $("#inputGameId").html(data);
  }
})
})
</script>

Answer 1

考虑以下代码： https : //jsfiddle.net/Twisty/5p2yg034/

HTML

<form method="get" class="d-print-none" id="gameForm" data-team-url="./teams" gdata-game-url="./games">
  <div class="input-group">
    <select class="custom-select" id="inputTeamId" name="inputteamid">
      <option></option>
      <option value="t1">Team 1</option>
      <option value="t2">Team 2</option>
      <option value="t3">Team 3</option>
    </select>
    <select class="custom-select" id="inputGameId" name="inputgameid">
      <option></option>
      <option value="g1">Game 1</option>
      <option value="g2">Game 2</option>
      <option value="g3">Game 3</option>
    </select>
    <div class="input-group-append">
      <button class="btn btn-outline-secondary" type="submit" value="submit" onclick="loading();">Run</button>
    </div>
  </div>
</form>

这里要看的一件事是使用data属性，以便以后可以在jQuery中使用.data() 。

JavaScript的

$(function() {
  function loadData() {
    var fd = localStorage.getItem("fd");
    if (fd != null) {
      return JSON.parse(fd);
    }
    return false;
  }

  function saveData(fd) {
    localStorage.setItem("fd", JSON.stringify(fd));
  }

  function get(item) {
    if (item == undefined) {
      item = "team"
    }
    var url;
    switch (item) {
      case "team":
        url = $("#gameForm").data("team-url");
        $.get(url, function(r) {
          $("#inputTeamId").val(r);
        });
        break;
      case "game":
        url = $("#gameForm").data("game-url");
        $.get(url, {
          'selected_teamid': $("#inputTeamId").val()
        }, function(r) {
          $("#inputGameId").val(r);
        });
    }
    saveData({
      'inputTeamId': $("#inputTeamId").val(),
      'inputGameId': $("#inputGameId").val()
    });
  }

  function loading(e) {
    e.preventDefault();
    saveData({
      'inputTeamId': $("#inputTeamId").val(),
      'inputGameId': $("#inputGameId").val()
    });
    // Loading script
  }

  function init() {
    var formData = loadData();
    if (formData) {
      $.each(formData, function(i, d) {
        $("#" + i).val(d);
      });
    } else {
      get("team");
    }
  }

  $("#inputTeamId").change(function() {
    get("team");
  });

  $("#gameForm").submit(loading);

  init();
});

本示例利用localStorage快速存储表单值。 可以轻松调整功能以使用Cookies或将其推送到要存储的服务器。 这取决于您的需求。

如果表单具有基本数据，则将其收集到一个对象中将很容易并且有助于存储。 我们只能将String数据存储到localStorage ，因此我们可以使用JSON.stringify()将对象转换为String，以便稍后进行解析。

页面加载后，我们可以尝试加载数据。 如果没有localStorage内容，它将尝试获得一个团队。 如果有数据，它将通过ID在表单元素中设置该数据。

在脚本中，您可以使用$("#gameForm").data('team-url')和$("#gameForm").data('game-url') 。 如果您的表单变得更复杂，则可以考虑使用从一个脚本中获取数据并将其传递给项目。

希望有所帮助。