如果在多个下拉列表中选择了选项，则显示 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 类而被隐藏。您需要删除这些或将id 属性id="hiddenform" 和id="hiddenform2" 移动到<form> 元素本身，以便JavaScrit 显示它们：https://jsfiddle.net/6gzbwopv/