Javascript, измените скрытое значение на раскрывающийся индекс
У меня есть форма в моем шаблоне с раскрывающимся списком для выбора опции. как я могу изменить скрытое значение на индекс того, что выбрано. Поэтому, если они выбирают вариант 2 со значением «Сеть», он сохраняет 1, или если они выбирают вариант 1 со значением «Стартеры», он сохраняет 0.
<div class="form-group">
<input type="hidden" id="arrayIndex" name="arrayIndex">
<label for="dishCategory">Choose a category:</label>
<select type="text" class="form-control" name="dishCategory" id="dishCategory">
{{#entries}}
{{#category}}
<option value="{{catName}}">{{catName}}</option>
{{/category}}
{{/entries}}
</select>
</div>
Ответы 1
Следующий фрагмент добавляет некоторую логику в ваш html-документ. Каждый раз, когда вы выбираете новую опцию из раскрывающегося списка, она выполняет следующие действия:
- Обновляет выходное сообщение, показывающее, какой индекс был выбран среди опции
- Устанавливает значение ввода скрытого типа (
#arrayIndex) в качестве индекса, упомянутого ранее.
document.addEventListener("DOMContentLoaded", function() {
let select = document.getElementById('dishCategory');
select.addEventListener('change', (event) => {
//value of the selected option
let selectedValue = select.value;
//index of the selected option
let selectedOptionIndex = select.selectedIndex;
//the entire selected option element
let selectedOption = select.options[select.selectedIndex];
//updates the msg with information about which option was picked
document.getElementById('msg').innerText =
`The index of the option chosen was: ${selectedOptionIndex}`;
//updates the value of the hidden input with such index
document.getElementById('arrayIndex').value =
selectedOptionIndex;
});
});#msg{
border: solid 1px black;
margin-bottom: 10px;
}<div class="form-group">
<input type="hidden" id="arrayIndex" name="arrayIndex">
<div id="msg">Select an option in the dropdown...</div>
<label for="dishCategory">Choose a category:</label>
<select type="text"
class="form-control"
name="dishCategory"
id="dishCategory">
<option value="" disabled selected>Select your option</option>
<option value="Tom">01-Tom</option>
<option value="Jerry">02-Jerry</option>
<option value="Mickey">03-Mickey</option>
</select>
</div>Я получил это значение через свойство selectedIndex узла выбора. Так что нет никакого способа избежать этого, и вы должны принять это во внимание. Считайте, что это нулевой индекс (начиная с нуля), который будет учитывать выбранный вами вариант во всем наборе. Поэтому, если в начале есть отключенная опция, это означает, что индекс сдвигается на +1. Когда он говорит 1, в терминах, основанных на нуле, это будет второй элемент массива, но это означает первый элемент списка, потому что мы игнорируем реальный первый элемент как отключенный.
В любом случае, чтобы сделать это кратким, ответ таков: вы должны принять во внимание, есть ли отключенные опции, чтобы изменить значение этого числа. Можно даже сделать что-то динамичное, если правила действительно строгие и хорошо известные. Но было бы трудно и долго обсуждать эти детали здесь и далее. Думаю, основное внимание было уделено.
Это прекрасно работает, есть ли способ сделать отключенную опцию не равной 0? вместо этого в вашем примере Том возвращает 0?