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>
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
0
0
15
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Это прекрасно работает, есть ли способ сделать отключенную опцию не равной 0? вместо этого в вашем примере Том возвращает 0?

Jack Duffy 09.04.2022 18:25

Я получил это значение через свойство selectedIndex узла выбора. Так что нет никакого способа избежать этого, и вы должны принять это во внимание. Считайте, что это нулевой индекс (начиная с нуля), который будет учитывать выбранный вами вариант во всем наборе. Поэтому, если в начале есть отключенная опция, это означает, что индекс сдвигается на +1. Когда он говорит 1, в терминах, основанных на нуле, это будет второй элемент массива, но это означает первый элемент списка, потому что мы игнорируем реальный первый элемент как отключенный.

Diego De Vita 09.04.2022 18:32

В любом случае, чтобы сделать это кратким, ответ таков: вы должны принять во внимание, есть ли отключенные опции, чтобы изменить значение этого числа. Можно даже сделать что-то динамичное, если правила действительно строгие и хорошо известные. Но было бы трудно и долго обсуждать эти детали здесь и далее. Думаю, основное внимание было уделено.

Diego De Vita 09.04.2022 18:33

Другие вопросы по теме