Динамические зависимые раскрывающиеся списки – это распространенная функция в веб-приложениях и формах, где параметры в одном раскрывающемся списке зависят от выбора, сделанного в другом. Хотя AJAX (асинхронный JavaScript и XML) часто используется для достижения этой функциональности, существуют альтернативные методы, не требующие выполнения запросов к серверу. В этой статье мы рассмотрим несколько методов реализации динамически зависимых раскрывающихся списков без использования AJAX, а также приведем примеры кода.

Метод 1: использование массивов JavaScript
Один из способов создания динамически зависимых раскрывающихся списков — использование массивов JavaScript. Вот пример:

<select id="countrySelect" onchange="populateCitySelect()">
  <option value="">Select Country</option>
  <option value="usa">USA</option>
  <option value="canada">Canada</option>
</select>
<select id="citySelect">
  <option value="">Select City</option>
</select>
<script>
  var citiesByCountry = {
    usa: ["New York", "Los Angeles", "Chicago"],
    canada: ["Toronto", "Vancouver", "Montreal"]
  };
  function populateCitySelect() {
    var countrySelect = document.getElementById("countrySelect");
    var citySelect = document.getElementById("citySelect");
    var selectedCountry = countrySelect.value;
    // Clear existing options
    citySelect.innerHTML = "<option value=''>Select City</option>";
    if (selectedCountry) {
      var cities = citiesByCountry[selectedCountry];
      for (var i = 0; i < cities.length; i++) {
        var option = document.createElement("option");
        option.text = cities[i];
        option.value = cities[i];
        citySelect.appendChild(option);
      }
    }
  }
</script>

Метод 2: использование данных JSON
Другой подход — хранить данные в формате JSON и динамически заполнять зависимый раскрывающийся список на основе выбранного параметра. Вот пример:

<select id="countrySelect">
  <option value="">Select Country</option>
  <option value="usa">USA</option>
  <option value="canada">Canada</option>
</select>
<select id="citySelect">
  <option value="">Select City</option>
</select>
<script>
  var citiesData = {
    usa: ["New York", "Los Angeles", "Chicago"],
    canada: ["Toronto", "Vancouver", "Montreal"]
  };
  var countrySelect = document.getElementById("countrySelect");
  var citySelect = document.getElementById("citySelect");
  countrySelect.addEventListener("change", function() {
    var selectedCountry = countrySelect.value;
    citySelect.innerHTML = "<option value=''>Select City</option>";
    if (selectedCountry) {
      var cities = citiesData[selectedCountry];
      cities.forEach(function(city) {
        var option = document.createElement("option");
        option.text = city;
        option.value = city;
        citySelect.appendChild(option);
      });
    }
  });
</script>

Метод 3: использование jQuery
Если вы предпочитаете работать с jQuery, вы можете создать динамически зависимые раскрывающиеся списки, используя событие change()и методы без AJAX. Вот пример:

<select id="countrySelect">
  <option value="">Select Country</option>
  <option value="usa">USA</option>
  <option value="canada">Canada</option>
</select>
<select id="citySelect">
  <option value="">Select City</option>
</select>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  var citiesData = {
    usa: ["New York", "Los Angeles", "Chicago"],
    canada: ["Toronto", "Vancouver", "Montreal"]
  };
  $(document).ready(function() {
    $("#countrySelect").change(function() {
      var selectedCountry = $(this).val();
      $("#citySelect").empty().append("<option value=''>Select City</option>");
      if (selectedCountry) {
        var cities = citiesData[selectedCountry];
        $.each(cities, function(index, city) {
          $("#citySelect").append("<option value='" + city + "'>" + city + "</option>");
        });
      }
    });
  });
</script>

В этой статье мы рассмотрели три метода реализации динамически зависимых раскрывающихся списков без использования AJAX. Используя массивы JavaScript, сохраняя данные в формате JSON или используя jQuery, вы можете легко создавать интерактивные и адаптивные формы. Эти методы предлагают альтернативу решениям на основе AJAX и могут использоваться в различных проектах веб-разработки.

Используя эти методы, вы можете улучшить взаимодействие с пользователем и повысить удобство использования ваших веб-приложений, не полагаясь на запросы сервера.

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