Выпадающий список Bootstrap с зависимостями

Как создать раскрывающийся список с помощью начальной загрузки, чтобы включить его в форму? Должно быть 3 поля, но одно из них должно быть скрыто в зависимости от того, что Пользователь выбрал в первом поле.

Example:
First field options: Book/Movie
2nd field options if book is selected (after selecting in first field this field should appear 1field should stay visible and 3rd field should stay invisible): Action/Horror/Drama
3rd field oprions if movie is selected: DVD/Cinema/VoD (now 1st field is visible, 2nd is not.

Код, который я пробовал.

<div class = "dropdown">
  <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
    Books
  </button>
  <div class = "dropdown-menu_1-always-visible">
    <a class = "dropdown-item" href = "#">Books</a>
    <a class = "dropdown-item" href = "#">Movies</a>
  </div>
<div class = "dropdown-menu-2-hidden-if-movies-selected-in-field-1">
    <a class = "dropdown-item" href = "#">Action</a>
    <a class = "dropdown-item" href = "#">Horror</a>
    <a class = "dropdown-item" href = "#">Drama</a>
  </div>
<div class = "dropdown-menu-3-hidden-if-books-selected-in-1">
    <a class = "dropdown-item" href = "#">DVD</a>
    <a class = "dropdown-item" href = "#">Cinema</a>
    <a class = "dropdown-item" href = "#">Vod</a>
  </div>
</div> 

Спасибо за помощь! Мне нужно реализовать это с помощью PHP / HTML и Bootstrap для Laravel :)

🤔 А знаете ли вы, что...
PHP поддерживает множество библиотек для работы с RESTful API.


236
1

Ответ:

Решено
<a class = "dropdown-item" onclick = "showMySection()" href = "#">Books</a>
<a class = "dropdown-item" onclick = "showMySection1()" href = "#">Movies</a>


<script type = "text/javascript">

function showMySection(){
     document.getElementsByClassName("dropdown-menu-2-hidden-if-movies-selected-in-field-1").style.display = 'block';
     document.getElementsByClassName("dropdown-menu-3-hidden-if-books-selected-in-1").style.display = 'none';    
}

function showMySection1(){
    document.getElementsByClassName("dropdown-menu-2-hidden-if-movies-selected-in-field-1").style.display = 'none';
    document.getElementsByClassName("dropdown-menu-3-hidden-if-books-selected-in-1").style.display = 'block';    
}       
</script>