如何在选择下拉列表中将多个更改为单个答案

【问题标题】：How to change multiple to single in select dropdown如何在选择下拉列表中将多个更改为单个
【发布时间】：2020-09-28 20:32:30
【问题描述】：

我的 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>

【问题讨论】：

标签： javascript html jquery forms dropdown

【解决方案1】：

document.querySelector('#blocation').addEventListener('change', e => {
  let multiple = [null, false, true, false][e.target.selectedIndex];
  document.querySelector('#subtype').multiple = multiple;
});

    <!------------------------- 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="false" >

        <option value="" disabled selected hidden>Select the subtype of business</option>
        <option value="1">abc</option>
        <option value="2">def</option>
        <option value="3">ghi</option>

      </select>
    </div>

这对你有用吗？

【讨论】：

【解决方案2】：

不太清楚你的意思。像这样的东西？至少可能有一些工作要做

function setSecondDropdown(){
let firstDrop = document.getElementById("blocation");

let text = firstDrop.options[firstDrop.selectedIndex].text;
text = text == "Others" ? "Single" : text;
let secondDrop = document.getElementById("secondDropdown");
document.getElementById("secondDiv").style.display = "block";
secondDrop.options[0].text = text;
 
}

<!------------------------- First Dropdown -------------------------->
<div class="ss-custom-select">
  <select class="full-width" id="blocation" name="blocation" onchange="setSecondDropdown()">
    <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 id="secondDiv" class="ss-custom-select" style="display: none;">
  <select id="secondDropdown"class="full-width" id="subtype" name="subtype[]" multiple="multiple">

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

【讨论】：

单选怎么能多变单选？我的意思是到