帶有依賴項的 Bootstrap 下拉列表

Question

如何使用引導程序創建下拉列表以將其包含在表單中？ 必須有 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 :)

Answer 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>