I have a form in my template with a drop down to select an option. how can I change a hidden value to the index of whats selected. So if they pick option 2 with the value of "Mains" it stores 1 or if they choose option 1 with a value of "Starters" it stores 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>
The following snippet adds some logic to your html document. Anytime you select a new option from the dropdown, it performs the following actions:
#arrayIndex) as that index mentioned beforedocument.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>