В переменную 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>