Как обеспечить связь между тегами <option>и <optgroup>? - PullRequest
Новая
       34

Как обеспечить связь между тегами <option>и <optgroup>?

0 голосов
/ 30 апреля 2020

Я использую плагин Bootstrap -select и создал два раскрывающихся списка, которые зависят друг от друга.

Параметры, заполняемые в первом раскрывающемся списке «selectcol1», содержат сочетание <option> и <optgroup>, второй вариант выпадающего списка «selectcol2» генерируется динамически на основе параметра, выбранного в «selectcol1». Например, если в первом раскрывающемся списке выбран параметр «Apple», второй возвращает <optgroup>, содержащий различные типы яблок, как показано ниже: 

<select id="selectcol1" class="selectpicker" multiple>
  <option>Vegetables</option>
  <optgroup label="Fruits">
    <option>Apple</option>
    <option>Mango</option>
  </optgroup>
</select>

<select id="selectcol2" class="selectpicker" multiple>
  <optgroup label="Apple">
    <option>Red Apple</option>
    <option>Green Apple</option>
    <option>Yellow Apple</option>
  </optgroup>
</select>

Теперь контрольно-пропускной пункт на самом деле пытается сопоставить весь <optgroup> с любым <option>, который может быть выбран в 'selectcol2' с выбранным <option> в 'selectcol1 ».

Когда нажата кнопка отправки, JSON, отправляемый на NodeJS, должен выглядеть следующим образом, если выбраны «Красное яблоко» и «Зеленое яблоко»: 

{
  selectcol1: { 'Apple': ['Red Apple','Green Apple'] }
}

Есть ли способ выбрать optgroup с меткой = 'Apple' и получить массив только выбранных опций в пределах 'selectcol2', используя bootstrap -select?

Я пытался добавить класс под названием «Apple» к каждому из параметров во время создания и использовал getElementsByClassName для получения параметров с классом «Apple» и извлечения значения, но это не сработало, как ожидалось.

...