如果在多個下拉列表中選擇了選項，則顯示 html 元素

Question

我想在 bootstrap 4 模塊中創建 2 個下拉列表，如果選擇了選項 3，則會出現帶有輸入的表單。 我設法找到了一個顯示隱藏元素的代碼，但我只在第一個下拉列表中工作，我有 2 個。

 function showDiv(divId, element) { document.getElementById(divId).style.display = element.value == 3? 'block': 'none'; }

 #hiddenform { display: none; } #hiddenform2 { display: none; }

 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div class="modal-content"> <div class="modal-header"> <div class="modal-title gap-title" id="exampleModalCenterTitle">Title</div> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <form> <div class="form-inline align-items-center"> <label class="mr-sm-2 col-form-label-lg">Option 1</label> <select class="custom-select" onchange="showDiv('hiddenform', this)"> <option value="" selected disabled>Choose option</option> <option value="1">Previous version</option> <option value="2">Current version</option> <option value="3">From Excel</option> </select> <form method="POST" action="" enctype="multipart/form-data" class="collapse row justify-content-center mx-auto"> <div class="input-group p-2"> <div class="custom-file" id="hiddenform"> <input type="file" class="custom-file-input pointer" name="file"> <label class="custom-file-label pointer" for="customFile">Choose file</label> </div> </div> </form> <label class="mr-sm-2 col-form-label-lg">Option 2</label> <select class="custom-select" onchange="showDiv('hiddenform2', this)"> <option value="" selected disabled>Choose option</option> <option value="1">Previous version</option> <option value="2">Current version</option> <option value="3">From Excel</option> </select> <form method="POST" action="" enctype="multipart/form-data" class="collapse row justify-content-center mx-auto"> <div class="input-group p-2" id="hiddenform2"> <div class="custom-file"> <input type="file" class="custom-file-input pointer" name="file"> <label class="custom-file-label pointer" for="customFile">Choose file</label> </div> </div> </form> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <a href="{{url_for('gap_analysis_output')}}"> <button type="button" class="btn btn-primary">Generate file</button> </a> </div> </div>

https://jsfiddle.net/0usLh1jw/6/

Answer 1

除了 Rory 在評論中提到的之外， <form>元素由於collapse CSS class 而被隱藏。 您需要刪除這些或將id屬性id="hiddenform"和id="hiddenform2"移動到<form>元素本身，以便 JavaScrit 顯示它們： https://jsfiddle.net/6gzbwopv/