Блог

Главная - Вопросы по программированию - Объединение выпадающих списков в цепочку

Объединение выпадающих списков в цепочку

#javascript #html #drop-down-menu

#javascript #HTML #выпадающее меню

Вопрос:

Я делаю свой первый проект на HTML / CSS / JavaScript. Я свободно владею Java и C.

введите описание изображения здесь

У меня есть группа изображений, которые разделены на многоуровневые группы / подгруппы. Прежде чем я представлю их, мне нужно выбрать группы, используя DDL (выпадающие списки). Я хочу отобразить первый DDL и только после выбора представить второй и так далее. Например, у меня есть DDL с [Группа A, Группа B, группа C], и если я выберу группу A, то появится второй DDL с параметрами [Группа AA, Группа AB]. Если я выберу группу AA, то появится третий DDL. Если я выберу группу AB, должны быть представлены изображения из этой группы (потому что внутри группы AB нет подгрупп). Мне нужно не более 3 уровней (как на картинке). Группы фиксированы, они никогда не меняются.

Имейте в виду, что если я нахожусь в группе AAA и меняю первый DDL на группу B, 2-й DDL должен сбросить настройки (и изменить его параметры), а 3-й DDL должен исчезнуть.

Как я могу этого добиться?

Ответ №1:

Я создал скрипку для демонстрации этого. Надеюсь, это то, чего вы пытаетесь достичь. Скрипка очень простая и может быть доработана и переработана, чтобы быть более динамичной / универсальной

 var optionAppendValues = ["A", "B", "C"];

function createTwo() {
    var selectOneValue = document.getElementById('images_one').value;
  var selectTwo = document.getElementById('images_two');
        resetTwo();
      resetThree();
      if(selectOneValue !== "default") {
           for (i = 0; i < 3; i  ) {
      var option = document.createElement("option");
      option.text = "Group "   selectOneValue   optionAppendValues[i];
      option.value = selectOneValue   optionAppendValues[i];
      selectTwo.add(option);
    }
    selectTwo.style.display = "block"; 
      }
}

function createThree() {
        var selectTwoValue = document.getElementById('images_two').value;
    var selectThree = document.getElementById('images_three');
    resetThree();   
    if(selectTwoValue !== "default") {
        for (i = 0; i < 3; i  ) {
      var option = document.createElement("option");
      option.text = "Group "   selectTwoValue   optionAppendValues[i];
      option.value = selectTwoValue   optionAppendValues[i];
      selectThree.add(option);
    }
    selectThree.style.display = "block";
    }
}

function resetTwo(){
  var selectTwo = document.getElementById('images_two');
    for (i = 3; i > 0; i--) {
      var option = document.createElement("option");
      selectTwo.remove(i);
    }  
    selectTwo.style.display = "none";
}

function resetThree(){
  var selectThree = document.getElementById('images_three');
    for (i = 3; i > 0; i--) {
      var option = document.createElement("option");
      selectThree.remove(i);
    }  
    selectThree.style.display = "none";
}  
 #images_two, #images_three {
  display:none;
  margin-left: 55px;
  margin-top: 5px
}  
 <div class="container">
  <label for="images_one">Images:</label>

  <select name="images_one" id="images_one" onchange="createTwo()">
    <option value="default">Please select...</option>
    <option value="A">Group A</option>
    <option value="B">Group B</option>
    <option value="C">Group C</option>
  </select>
  
   <select name="images_two" id="images_two" onchange="createThree()">
       <option value="default">Please select...</option>
  </select>
  
     <select name="images_three" id="images_three">
         <option value="default">Please select...</option>
     </select>
</div>

Комментарии:

1. Большое вам спасибо!