выбор optgroup для второго раскрывающегося списка путем выбора элемента в первом раскрывающемся списке - PullRequest
Новая
       67

выбор optgroup для второго раскрывающегося списка путем выбора элемента в первом раскрывающемся списке

0 голосов
/ 29 мая 2020

Я читал другие темы по этому c топу, но все они очень сложные и используют sh разные методы для его выполнения. Я не использую сценарии или методы базы данных. Моя страница формы проста HTML и CSS.

Фон: У меня есть два выпадающих меню. Один предназначен для выбора региона, второй - для выбора зоны внутри региона. Я составлял списки со всем, но обнаружил, что второй список становится очень длинным. Я уже разделил его на optgroups, используя ярлыки для разделения групп. Цель: я бы хотел, чтобы при выборе региона в первом раскрывающемся меню он автоматически определял, какую группу во втором раскрывающемся меню применить. Элементы в первом меню и метки групп optgroup во втором совпадают, поэтому, если первое меню содержит элемент Skyferry, во втором раскрывающемся списке есть группа optgroup с тем же именем.

Пример:

Первый раскрывающийся список : 

    <FIELDSET>
      <LEGEND class="legend"><STRONG>Area Location/Type</STRONG></LEGEND>
      <SELECT name="location_1">
        <OPTION value="none" selected>&nbsp;</OPTION>
        <OPTGROUP label="One Time Areas">
          <OPTION value="Skyferry">Skyferry</OPTION>
        </OPTGROUP>
      </SELECT>
    </FIELDSET>

Второй раскрывающийся список : 

        <FIELDSET>
          <LEGEND class="legend"><STRONG>Zone Location/Type specific Location</STRONG></LEGEND>
          <SELECT name="location_2">
            <OPTION value="none" selected>&nbsp;</OPTION>
            <OPTGROUP label="Skyferry
              <OPTION value="Observation Parlour">Observation Parlour</OPTION>
              <OPTION value="Sky Saloon">Sky Saloon</OPTION>
              <OPTION value="Air Deck">Air Deck</OPTION>
            </OPTGROUP>
          </SELECT>
        </FIELDSET>

Очевидно, что в обоих меню есть другие пункты. Я свел его к этому в качестве примера. Я хотел бы, чтобы optgroup во втором списке был единственными элементами, отображаемыми во втором списке, если выбран элемент в первом списке. Все остальные группы optgroups во втором списке будут отсутствовать в списке, поскольку не относятся к элементу, выбранному в первом списке.

Возможно ли это без использования javascript, jquery или какого-либо другого протокола базы данных?

Изменить:

Наконец-то я понял, как включить запуск фрагмента. Я нашел этот пост за пять лет go:

Два HTML -select box, связанных друг с другом

Он почти делает то, что я хочу, но я хотите, чтобы второй список был заполнен меткой optgroup, поскольку он имеет тот же текст, что и значение параметра в первом списке. Все параметры в этой группе optgroup будут включены во второй список, за исключением всех остальных групп optgroup. Поскольку я не очень хорошо владею JavaScript, я мог бы использовать некоторую помощь, чтобы изменить код, чтобы он работал в моих обстоятельствах.

Образец, представленный в этом сообщении: 

    var sel1 = document.querySelector('#sel1');
    var sel2 = document.querySelector('#sel2');
    var options2 = sel2.querySelectorAll('option');
    
    function giveSelection(selValue) {
      sel2.innerHTML = '';
      for(var i = 0; i < options2.length; i++) {
        if(options2[i].dataset.option === selValue) {
          sel2.appendChild(options2[i]);
        }
      }
    }
    
    giveSelection(sel1.value);
    <select id="sel1" onchange="giveSelection(this.value)">
      <option value="a">a</option>
      <option value="b">b</option>
    </select>
    <select id="sel2">
      <option data-option="a">apple</option>
      <option data-option="a">airplane</option>
      <option data-option="b">banana</option>
      <option data-option="b">book</option>
    </select>

Изменить 2:

Я тоже нашел этот пост:

Соответствие именно option и optgroup

Кажется, это именно то, что я ищу, за исключением того, что это не работает. fiddle в ответе просто содержит все в обоих выпадающих списках и не разделяет их, как положено.

...