Создание динамических c элементов формы на основе изменения выбора

Question

Требуется запросить у пользователя (настраиваемый) набор входных данных, в основном текстовых полей, на основании их выбора из списка опций в поле выбора. Я не хочу определять все входные данные, а затем показывать / скрывать различные группы, а вместо этого вводить эти компоненты в пользовательский интерфейс на основе выбора пользователей. Я не думаю, что видел что-то подобное, пока не определил все элементы ввода заранее.

Я думаю сохранить определение входных данных либо в json, либо в классе модели.

Другими словами, что-то похожее на этот пользовательский интерфейс, но в зависимости от выбора пользователя для «Выбрать тип файла» они могут быть представлены с 5 входами или только 4 или 3 и т. Д. c.

Кроме используя jQuery, чтобы показать / скрыть различные группы входов на основе выбора пользователя, каким другим способом можно было бы реализовать подобную форму «dynamici c»?

Answer 1

Я думаю, что лучшее решение - добавить все пять входов в ваш пользовательский интерфейс и использовать CSS -классы, чтобы скрыть / отобразить 2 последних входа (так как 3 других всегда необходимы и, следовательно, всегда отображаются) в зависимости от выбор пользователя из списка параметров.

<label>Please select an option</label>
<select id="choice">
  <option value="3">3 Inputs</option>
  <option value="4">4 Inputs</option>
  <option value="5">5 Inputs</option>    
</select>
<button id="btn">Go</button>
<br>    
<div id="container" class="container">
  <div>
    <label for="input-001">Input 001</label>
    <input type="text" id="input-001" name="input-001">
  </div>
  <div>
    <label for="input-002">Input 002</label>
    <input type="password" id="input-002" name="input-002">
  </div>
  <div>
    <label for="input-003">Input 003</label>
    <input type="date" id="input-003" name="input-003">
  </div>
  <div id="div-004">
    <label for="input-004">Input 004</label>
    <input type="email" id="input-004" name="input-004">
  </div>
  <div id="div-005">
    <label for="input-005">Input 005</label>
    <input type="file" name="input-005">
  </div>  
</div>

Добавить css -класс:

.optional {
  display: none;
  /*visibility: hidden;*/ /*you may/nedd to use visibility instead of display*/
} 

Добавить обработчик событий к кнопке:

$(document).ready(function() {
    $("#btn" ).click(function(){
      let choice = $("#choice").val();
      if (choice == 3) {
        console.log("hide input-004 & input-005 ");
        $("#div-004").addClass("optional");
        $("#div-005").addClass("optional");
      } else if(choice == 4) {
        console.log("hide input-005 & display input-004 ");
        $("#div-004").removeClass("optional");
        $("#div-005").addClass("optional");
      } else if(choice == 5) {
        $("#div-004").removeClass("optional");
        $("#div-005").removeClass("optional");
      }
    })
})

Вот пример рабочая скрипка