В чем проблема присваивания значения value тегу

Question

В проекте нужно реализовать 2 связанных выпадающих списка, в которых содержимое второго списка заполняется в зависимости от выбора элемента в первом списки, за тем эти данные отправляются на сервер. Есть скрипт, которые реализует эту задачу, но возникла проблема. В переменную value записывается индекс элемента в массиве, а не само его значение. Где ошибка в коде?

Название категории:
<select name="type" id="category" class="form-select form-select-sm" aria-label=".form-select-sm example">
  <option value="Кальяны" selected>Кальяны</option>
  <option value="Напитки">Напитки</option>
  <option value="Еда">Еда</option>
</select>
Название подкатегории:
<select name="subtype" id="subcategory" class="form-select form-select-sm" aria-label=".form-select-sm example">
  <script>
    let categories = {
      Еда: ["Салаты", "Пицца", "Пироги", "Блюда на углях", "Гарниры", "Мороженое"],
      Напитки: ["Лимонады", "Милкшейки", "Кофе", "Чайные напитки", "Алкогольные напитки"],
      Кальяны: ["Кальяны", "Коктейли", "Коктейль + Фруктовая чаша (апельсин)"]
    };
    let category = document.getElementById("category");
    let subcategory = document.querySelector("#subcategory");
    window.onload = selectCategory;
    category.onchange = selectCategory;

    function selectCategory(ev) {
      subcategory.innerHTML = "";
      let c = this.value || "Кальяны",
        o;
      for (let i = 0; i < categories[c].length; i++) {
        o = new Option(categories[c][i], categories[c][i]);
        subcategory.add(o);
      }
    }
  </script>
</select>

Answer 1

В переменную value записывается индекс элемента в массиве, а не само его значение. Где ошибка в коде?

Не вижу каких либо проблем, если выводить value при изменение selectа, то выводится тоже значение, что и текст option.

let selects = document.querySelectorAll('select');

[...selects].map(e => {
  e.addEventListener('change', e => console.info(e.target.value));
});

Название категории:
<select name="type" id="category" class="form-select form-select-sm" aria-label=".form-select-sm example">
  <option value="Кальяны" selected>Кальяны</option>
  <option value="Напитки">Напитки</option>
  <option value="Еда">Еда</option>
</select>
Название подкатегории:
<select name="subtype" id="subcategory" class="form-select form-select-sm" aria-label=".form-select-sm example">
  <script>
    let categories = {
      Еда: ["Салаты", "Пицца", "Пироги", "Блюда на углях", "Гарниры", "Мороженое"],
      Напитки: ["Лимонады", "Милкшейки", "Кофе", "Чайные напитки", "Алкогольные напитки"],
      Кальяны: ["Кальяны", "Коктейли", "Коктейль + Фруктовая чаша (апельсин)"]
    };
    let category = document.getElementById("category");
    let subcategory = document.querySelector("#subcategory");
    window.onload = selectCategory;
    category.onchange = selectCategory;

    function selectCategory(ev) {
      subcategory.innerHTML = "";
      let c = this.value || "Кальяны",
        o;
      for (let i = 0; i < categories[c].length; i++) {
        o = new Option(categories[c][i], categories[c][i]);
        subcategory.add(o);
      }
    }
  </script>
</select>

Осмелюсь предположить, что проблема всё таки не в JS, а в обработчике на стороне сервера.

точно не в JS? мы ж даже не видим, что он отправляет

Я не знаю как именно вы отправляете запрос на сервер, но если использовать form.serialize() (JQ) или аналог на JS, то мы видим какой запрос ушёл

let selects = document.querySelectorAll('select');

[...selects].map(e => {
  e.addEventListener('change', e => console.log(e.target.name+': '+e.target.value));
});

document.querySelector('form').addEventListener('submit', e => {
  e.preventDefault();
  let query = new URLSearchParams(new FormData(e.target)).toString();
  console.log('POST: '+decodeURI(query));
  return false;
});

<form action="" method="post">
  Название категории:
  <select name="type" id="category" class="form-select form-select-sm" aria-label=".form-select-sm example">
    <option value="Кальяны" selected>Кальяны</option>
    <option value="Напитки">Напитки</option>
    <option value="Еда">Еда</option>
  </select>
  Название подкатегории:
  <select name="subtype" id="subcategory" class="form-select form-select-sm" aria-label=".form-select-sm example">
    <script>
      let categories = {
        Еда: ["Салаты", "Пицца", "Пироги", "Блюда на углях", "Гарниры", "Мороженое"],
        Напитки: ["Лимонады", "Милкшейки", "Кофе", "Чайные напитки", "Алкогольные напитки"],
        Кальяны: ["Кальяны", "Коктейли", "Коктейль + Фруктовая чаша (апельсин)"]
      };
      let category = document.getElementById("category");
      let subcategory = document.querySelector("#subcategory");
      window.onload = selectCategory;
      category.onchange = selectCategory;

      function selectCategory(ev) {
        subcategory.innerHTML = "";
        let c = this.value || "Кальяны",
          o;
        for (let i = 0; i < categories[c].length; i++) {
          o = new Option(categories[c][i], categories[c][i]);
          subcategory.add(o);
        }
      }
    </script>
  </select>
  <br>
  <input type="submit" value="view query">
</form>

БЛОГ НА HUSL

В чем проблема присваивания значения value тегу

Ответы (1 шт):

БЛОГ НА HUSL

В чем проблема присваивания значения value тегу ?

Ответы (1 шт):

В чем проблема присваивания значения value тегу