如何根据先前的下拉选择在 HTML 选择表单中显示多选和单选

Question

我的 HTML 中有两个下拉菜单，我正在尝试解决这个问题，当我在第一个下拉菜单中选择 "Multiple" 时，第二个下拉菜单可以是 multiple="multiple"，当我在第一个下拉列表中选择 Single，第二个下拉列表可以设置为单个而不是多个，最后当我选择 Others 时，第二个下拉列表也将是单个。以下是我的代码：

<!------------------------- First Dropdown -------------------------->
<div class="ss-custom-select">
  <select class="full-width" id="blocation" name="blocation">
    <option value="" disabled selected hidden>Select the number of physical location</option>

    <option value="One">Single</option>
    <option value="Multiple">Multiple</option>
    <option value="Online">Others</option>
  </select>
</div>

<!------------------------- Second Dropdown -------------------------->
<div class="ss-custom-select">
  <select class="full-width" id="subtype" name="subtype[]" multiple="multiple">

    <option value="" disabled selected hidden>Select the subtype of business</option>
  </select>
</div>

Answer 1

这样

注意我在加载时调用 .change()

$("#blocation").on("change",function() {
  $("#subtype").prop("multiple",this.value==="Multiple")
}).change()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!------------------------- First Dropdown -------------------------->
<div class="ss-custom-select">
  <select class="full-width" id="blocation" name="blocation">
    <option value="" disabled selected hidden>Select the number of physical location</option>

    <option value="One">Single</option>
    <option value="Multiple">Multiple</option>
    <option value="Online">Others</option>
  </select>
</div>

<!------------------------- Second Dropdown -------------------------->
<div class="ss-custom-select">
  <select class="full-width" id="subtype" name="subtype[]" multiple="multiple">
    <option value="" disabled selected hidden>Select the subtype of business</option>
    <option value="1">One</option>
    <option value="2">One</option>
    <option value="3">One</option>
  </select>
</div>