[英]Bootstrap drop-down list with dependencies
How to create a drop down list using bootstrap to include it in the form?如何使用引导程序创建下拉列表以将其包含在表单中? There has to be 3 fields but 1 of them has to be hidden depending of what a User selected in first field.
必须有 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.
Code which i've tried.我试过的代码。
<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>
Thank you for all the help!谢谢大家的帮助! I need to implement it with PHP/HTML and Bootstrap to Laravel :)
我需要用 PHP/HTML 和 Bootstrap 来实现它到 Laravel :)
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.