在下拉菜單中維護選定的值

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') 。 如果您的表單變得更復雜，則可以考慮使用從一個腳本中獲取數據並將其傳遞給項目。

希望有所幫助。