Я пытаюсь создать форму, которая будет отображать больше полей на основе того, что выбрано в раскрывающемся меню. Если выбран 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";
      }
    }

Помощь была бы оценена, поскольку я чувствую, что застрял, пытаясь заставить это работать.

2
Jdar 24 Фев 2018 в 23:10

3 ответа

Лучший ответ

Вы можете добавлять столько, сколько хотите, динамически:

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>
0
Pedram 24 Фев 2018 в 21:21

Думай немного по-другому. И используйте следующую стратегию.

Сначала скройте все div.

  1. Присвойте идентификатор div, например, guestForm1, guestForm2 и т. Д.
  2. Передайте идентификатор выпадающего списка в javascript и получите его выбранное значение
  3. Цикл от selectedValue как целое число до 1 (или наоборот) и найти div с id=‘guestForm’+loopIndex.
  4. Сделай это div display block.

Я могу попытаться собрать код для этого в качестве примера

< Сильный > Пример

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

Обратите внимание, вы все равно должны добавить нулевые проверки, если div с определенным идентификатором не существует

0
Surjit SD 24 Фев 2018 в 20:54

Вы бы поместили все скрытые гостевые формы в коллекцию, а затем перебрали эту коллекцию, отображая их, пока не достигнете числа, выбранного в раскрывающемся списке. Гостевым формам не нужны id s, вы просто дадите им один и тот же класс CSS. Вы также можете настроить скрытие всех гостевых форм по умолчанию (используя CSS-класс, а не встроенные стили).

Наконец, не используйте встроенные атрибуты событий HTML (onchange, onclick и т. Д.). Это древний метод, который вызывает много проблем и должен просто умереть. Вместо этого сделайте все ваши события привязки в JavaScript.

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");
    }
  });
}
.hidden { display:none; }
<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>

Теперь, продемонстрировав все это, действительно лучшее решение - просто динамически создавать гостевые формы по требованию, а не писать один и тот же HTML снова и снова:

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);
  }
}
.hidden { display:none; }
<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>
0
Scott Marcus 24 Фев 2018 в 20:39