Сохранить выбранные значения в выпадающем меню

Question

У меня есть каскадное выпадающее меню, заполняемое вызовом AJAX, которое работает как задумано. Однако, когда я отправляю форму и обновляю страницу, выбранные значения сбрасываются. Я хотел бы иметь возможность сохранять выбранные значения в их раскрывающихся списках после отправки формы и обновления страницы.

Я уже нашел несколько решений по переполнению стека, но, похоже, не могу найти решение, которое показывает, как поддерживать выбранные значения из формы, параметры которой заполняются динамически.

Мои 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, чтобы впоследствии вы могли использовать .data() в jQuery.

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 или отправки их на сервер для хранения. Это зависит от ваших потребностей.

Если форма содержит базовые данные, сбор данных в объект будет простым и полезным для хранения. Мы можем хранить только строковые данные в localStorage, поэтому мы можем использовать JSON.stringify() для преобразования объекта в строку, которую мы можем проанализировать позже.

Когда страница загружается, мы можем попытаться загрузить данные. Если нет контента localStorage, он попытается получить команду. Если есть данные, они установят эти данные в элементах формы по идентификатору.

В вашем скрипте вы можете собирать URL, используя $("#gameForm").data('team-url') и $("#gameForm").data('game-url'). Если ваша форма усложняется, вы можете рассмотреть возможность использования GET для данных из одного скрипта с передачей ему элемента.

Надеюсь, это поможет.