javascript - 根据下拉选择Javascript显示/隐藏多个div

Question

我正在尝试创建一个表单，该表单将根据在下拉菜单中选择的内容显示更多字段。如果选择了 1 位客人，则会出现 1 个表格。如果为 2，则出现 2 个表格，依此类推。

我已经设法让第一个 Div (guestFormOne) 显示/隐藏，具体取决于是否选择了 1 位 guest ，但我正在努力寻找一种解决方案来实现最多 6 位 guest 。

这是我目前所拥有的:

HTML

    <h4>Number of Guests</h4>
<select onchange="numofGuests()">
  <option>Select number of guests</option>
  <option id="guestCountOne">1</option>
  <option id="guestCountTwo">2</option>
  <option id="guestCountThree">3</option>
  <option id="guestCountFour">4</option>
  <option id="guestCountFive">5</option>
  <option id="guestCountSix">6</option>
</select>

<div id="guestFormOne">
  <h4>Guest 1</h4>
  <input type="text" placeholder="Name">
  <select id="guest1_meal">
   <option>Meal Choice</option>
   <option>Buffet</option>
   <option>Gluten Free</option>
   <option>Dairy Free</option>
   <option>Vegan</option>
  </select>

  <select id="guest1_age">
   <option>Age</option>
   <option>Adult</option>
   <option>Child under 5</option>
   <option>Child 6 - 12</option>
  </select>

  <input type="text" placeholder="Allergies?">
</div>

<div id="guestFormTwo">
  <h4>Guest 2</h4>
  <input type="text" placeholder="Name">
  <select id="guest2_meal">
   <option>Meal Choice</option>
   <option>Buffet</option>
   <option>Gluten Free</option>
   <option>Dairy Free</option>
   <option>Vegan</option>
  </select>

  <select id="guest2_age">
   <option>Age</option>
   <option>Adult</option>
   <option>Child under 5</option>
   <option>Child 6 - 12</option>
  </select>

  <input type="text" placeholder="Allergies?">
</div>

Javascript

   function numofGuests() {
      if (document.getElementById("guestCountOne").selected) {
        document.getElementById("guestFormOne").style.display = "block";
      } else {
        document.getElementById("guestFormOne").style.display = "none";
      }
    }

帮助将不胜感激，因为我觉得我一直在努力让它发挥作用。

Answer 1

您可以动态添加任意数量的内容:

function numofGuests(val) {
    document.getElementById('guestFormOne').innerHTML = "";
    for (i = 0; i < parseInt(val.value); i++) { 
        document.getElementById('guestFormOne').innerHTML += '<h4>Guest '+(i+1)+'</h4><input type="text" placeholder="Name"><select  id="guest'+(i+1)+'_meal"><option>Meal Choice</option> <option>Buffet</option><option>Gluten Free</option><option>Dairy Free</option><option>Vegan</option></select><select id="guest'+(i+1)+'_age"><option>Age</option><option>Adult</option><option>Child under 5</option><option>Child 6 - 12</option></select><input type="text" placeholder="Allergies?">';
    }      
}    

<h4>Number of Guests</h4>
<select onchange="numofGuests(this)">
  <option>Select number of guests</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
</select>

<div id="guestFormOne"></div>