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

时间：2018-02-24 20:10:43

标签： javascript html

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

我设法得到第一个Div（guestFormOne）来显示/隐藏，取决于是否有1位客人被选中，但我很难找到一个解决方案，最多可以让6位客人参与。

这是我到目前为止所做的：

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";
      }
    }

帮助将不胜感激，因为我觉得我一直试图让这个工作。

3 个答案:

答案 0 :(得分：0)

您可以将所有隐藏的访客表单集合到一个集合中，然后遍历该集合，取消隐藏它们，直到达到下拉列表中选择的计数。客人表格不需要id，你只需要给他们所有相同的CSS类。您还可以将所有客户表单默认设置为隐藏（使用CSS也可以使用类，而不是使用内联样式）。

最后，请勿使用内联HTML事件属性（onchange，onclick等）。这是一种古老的技术 causes many problems ，需要死亡。相反，在JavaScript中执行所有事件绑定。

＆＃13;
＆＃13; 
var guestCount = document.getElementById("guestCount");
guestCount.addEventListener("change", numOfGuests);

// Get all the guest forms into an collection
var guestForms = document.querySelectorAll(".guestForm");


function numOfGuests() {
  // Loop through the guest forms based on the number selected
  guestForms.forEach(function(v,i){
    if(i < guestCount.value) {
      v.classList.remove("hidden");
    }
  });
}
＆＃13; 
.hidden { display:none; }
＆＃13; 
<h4>Number of Guests</h4>
<select id="guestCount">
  <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 class="guestForm hidden">
  <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 class="guestForm hidden">
  <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>

<div class="guestForm hidden">
  <h4>Guest 3</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>

<div class="guestForm hidden">
  <h4>Guest 4</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>

<div class="guestForm hidden">
  <h4>Guest 5</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>

<div class="guestForm hidden">
  <h4>Guest 6</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>

<div class="guestForm hidden">
  <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>

<div class="guestForm hidden">
  <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>
＆＃13;
＆＃13;
＆＃13;

现在，已经展示了所有这些，真正最好的解决方案是按需动态创建客户表单，而不是一遍又一遍地编写相同的HTML：

＆＃13;
＆＃13; 
var out = document.getElementById("output");
var guestCount = document.getElementById("guestCount");
guestCount.addEventListener("change", makeGuests);

function makeGuests(){

  out.innerHTML = ""; // Clear previous output
  
  // Set up arrays that hold data that the two guest form lists need:
  var meals = ["Meal Choice", "Buffet", "Gluten Free", "Dairy Free", "Vegan"];
  var ages = ["Age", "Adult", "Child under 5", "Child 6 - 12"];

  // Create a loop that iterates the numnber of times specified in the list
  for(var i = 0; i < guestCount.value; i++){
  
    // Create and configure a guest form, element by element...
    var container = document.createElement("div");
    
    var heading = document.createElement("h4");
    heading.textContent = "Guest " + (i + 1);
    container.appendChild(heading); // Put new element in container
    
    var txtName = document.createElement("input");
    txtName.type = "text"
    txtName.placeholder = "Name";
    txtName.name = "name";
    container.appendChild(txtName);
    
    var mealList = document.createElement("select");
    mealList.id = "guest" + (i + 1) + "_meal" ;
    // Loop through the meals array
    meals.forEach(function(value){
      // And, create an option for each one
      var opt = document.createElement("option");
      opt.textContent = value;
      mealList.appendChild(opt);
    });
    container.appendChild(mealList);
  
    var ageList = document.createElement("select");
    ageList.id = "guest" + (i + 1) + "_age" ;
    ages.forEach(function(value){
      var opt = document.createElement("option");
      opt.textContent = value;
      ageList.appendChild(opt);
    }); 
    container.appendChild(ageList);
  
    // Make final input
    var allergies = document.createElement("input");
    allergies.type = "text"
    allergies.placeholder = "Allergies?";
    container.appendChild(allergies);
  
    // Everything is made and in the container. Add the container to the document
    out.appendChild(container);
  }
}
＆＃13; 
.hidden { display:none; }
＆＃13; 
<h4>Number of Guests</h4>
<select id="guestCount">
  <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="output"></div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

想一点不同。并使用以下stratergy。

首先隐藏所有div。

  1. 将{id}提供给div，例如guestForm1，guestForm2等。
  2. 将下拉列表的ID传递给javascript并获取其选定的值
  3. 从selectedValue作为整数循环到1（或相反），并使用div查找id=‘guestForm’+loopIndex。
  4. 制作div display block。

    5. 我可以尝试将一些代码放在一起作为示例

    示例 

    <select onchange='showForms(this)'>
<option value='0'>None</option>
 <option value='1'>1</option>
 <option value='2'>2</option>
 <option value='3'>3</option>
 <option value='4'>4</option>
 <option value='5'>5</option>
 <option value='6'>6</option>
</select>



<div id='guestForm1' style='display:none'>11</div>
<div id='guestForm2' style='display:none'>22</div>
<div id='guestForm3' style='display:none'>33</div>
<div id='guestForm4' style='display:none'>44</div>
<div id='guestForm5' style='display:none'>55</div>
<div id='guestForm6' style='display:none'>66</div>

    <强>的Javascript 

    function showForms(dd)
{

    var ddVal=dd[dd.selectedIndex].value;

  for(i=1;i<=6;i++)
  {
     document.getElementById('guestForm'+i).style.display='none';
  }


  for(i=1;i<=ddVal;i++)
  {
     document.getElementById('guestForm'+i).style.display='block';
  }
}
      

    注意，如果具有特定id的div不存在，您仍应添加空检查

答案 2 :(得分：0)

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

{{1}}
{{1}}

相关问题
最新问题