Как добавить динамический c раскрывающийся список из файла. json, используя javascript?

Question

<form class="form-inline" action="/action_page.php"> 
              <div style="margin-bottom: auto; padding: 0%;">
                <select name="season" id="season"class="select">
                  <option value="0" name="season" id="season">Season</option>
                  <option value="1">Spring</option>
                  <option value="2">Summer</option>
                  <option value="1">Autumn</option>
                  <option value="1">Winter</option>
                </select>
                <select class="select" id="category" name="category">
                  <option value="0">Category</option>
                </select>
                <select class="select" id="destination" name="destination">
                  <option value="0">Destination</option>
                </select>
                <span><input type="image" class="search-button" src="../solution/assets/search-icon.svg" alt="Submit" width="48" height="50"></span>
                </div>
            </form>       

У меня есть файл. json и я написал код для извлечения данных из файла. json. Ниже приведен файл json:

destinations: [
  {
    id: 8375,
    name: "Bordeaux",
    country: "France",
    category: "wine"
  },
  {
    id: 34083,
    name: "Courchevel",
    country: "France",
    category: "ski"
  },
  {
    id: 110961,
    name: "Galapagos Islands",
    country: "Ecuador",
    category: "wonder"
  },
  {
    id: 25999,
    name: "Giza",
    country: "Egypt",
    category: "wonder"
  },
  {
    id: 45618,
    name: "Machu Picchu",
    country: "Peru",
    category: "wonder"
  },
  {
    id: 36284,
    name: "Sonoma",
    country: "United States",
    category: "wine"
  },
  {
    id: 79382,
    name: "Tuscany",
    country: "Italy",
    category: "wine"
  },
  {
    id: 40386,
    name: "Whistler",
    country: "Canada",
    category: "ski"
  },
  {
    id: 40374,
    name: "Zermatt",
    country: "Switzerland",
    category: "ski"
  }
],
seasonCategories: {
  spring: ["wine", "wonder"],
  summer: ["wine", "wonder"],
  autumn: ["wine", "wonder"],
  winter: ["wonder", "ski"]
}

};

Я добавил методы getSeason () getDestination () для получения данных из следующего файла json. Я хочу сделать это динамически в трех выпадающих списках, зависящих друг от друга. Как я могу добиться этого, используя javascript

Например, если в первом раскрывающемся списке выбрано лето, я sh покажу «вино» и «чудо» во втором раскрывающемся списке (Категория), и также выберите пункт назначения на основе категории, выбранной из второго раскрывающегося списка.

Answer 1

попробуйте это:

  <div class="container">
    <div>
      <select name="season">
        <option value="spring">spring</option>
        <option value="summer">summer</option>
        <option value="autumn">autumn</option>
        <option value="winter">winter</option>
      </select>
    </div>
    <div>
      <select name="category">
        <option value="wine">wine</option>
        <option value="wonder">wonder</option>
      </select>
    </div>
    <ul class="list">

    </ul>
  </div>

var destinations = [
      {
        id: 8375,
        name: "Bordeaux",
        country: "France",
        category: "wine"
      },
      {
        id: 34083,
        name: "Courchevel",
        country: "France",
        category: "ski"
      },
      {
        id: 110961,
        name: "Galapagos Islands",
        country: "Ecuador",
        category: "wonder"
      },
      {
        id: 25999,
        name: "Giza",
        country: "Egypt",
        category: "wonder"
      },
      {
        id: 45618,
        name: "Machu Picchu",
        country: "Peru",
        category: "wonder"
      },
      {
        id: 36284,
        name: "Sonoma",
        country: "United States",
        category: "wine"
      },
      {
        id: 79382,
        name: "Tuscany",
        country: "Italy",
        category: "wine"
      },
      {
        id: 40386,
        name: "Whistler",
        country: "Canada",
        category: "ski"
      },
      {
        id: 40374,
        name: "Zermatt",
        country: "Switzerland",
        category: "ski"
      }
    ];
    var seasonCategories = {
      spring: ["wine", "wonder"],
      summer: ["wine", "wonder"],
      autumn: ["wine", "wonder"],
      winter: ["wonder", "ski"]
    };
    document.getElementsByName('season')[0].onchange = function (e) {
      setCategoryOption(this.value);
    }
    function setCategoryOption(value) {
      var html = '';
      for (var i = 0; i < seasonCategories[value].length; i++) {
        var category = seasonCategories[value][i];
        html += '<option value="' + category + '">' + category + '</option>';
      }
      renderCategory(html);
    }

    function renderCategory(html) {
      document.getElementsByName('category')[0].innerHTML = html
    }

    document.getElementsByName('category')[0].onchange = function () {
      var category = this.value;
      var html = '';
      for (var i = 0; i < destinations.length; i++) {
        if (destinations[i].category === category) {
          html += '<li>' + destinations[i].name + ' ' + destinations[i].country + '</li>';
        }
      }
      document.getElementsByClassName('list')[0].innerHTML = html;
    }