维护下拉菜单中的选定值

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 来快速存储表单值。可以轻松调整功能以使用 Cookie 或将其推送到服务器进行存储。这取决于您的需求。

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

当页面加载时，我们可以尝试加载数据。如果没有localStorage 内容，它会尝试获取一个Team。如果有数据，它会通过 ID 在表单元素中设置数据。

在您的脚本中，您可以使用$("#gameForm").data('team-url') 和$("#gameForm").data('game-url') 收集网址。如果您的表单变得更复杂，您可以考虑使用 GET the data from one Script with a item 传递给它。

希望对您有所帮助。