Как создавать формы динамически или скрывать и показывать их на основе множественного выбора из выпадающего списка?
I have 32 office departments and I have to create an evaluation form for each of those which would make me write a lot of html but I thought of creating them dynamically based on drop down selection using for example: if a select item one from the drop down, it should show me the form for that specific item and if the user selects two or more items it should show multiple forms based on the amount of selected items in the drop down and should be filtered by id but I haven't been able to achieve this the way I want to. I'll leave a link here with a working example of what I have so far. Any help will be appreciated or new approaches you may think. using materialize css framework
рабочий пример: Сенча Скрипка[^]
Что я уже пробовал:
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
</head>
<body>
<div class="container">
<div class="row">
<div class="col s20 m9 l10">
<div class="content-wrapper">
<div class="input-field col s12">
<form method="POST" action="http://localhost/evaluaciones/public/evaluaciones" accept-charset="UTF-8">
<input name="_token" type="hidden" value="VaoolzO4hQUmyxwdRYjn1fGyOCKJ49OGTqqT33WG">
<div class="card-panel hoverable">
<label>Selecciona uno, varios o todas las opciones.</label>
<br>
<select multiple class="select_todo" id="select_seasons">
<optgroup label="Primero Piso">
<option id="1" value="1">Clínicas Odontologicas</option>
<option id="2" value="2">Recepción Odontología</option>
<option id="3" value="3">Tesorería</option>
<option id="4" value="4">Pastoral Universitaria</option>
<optgroup label="Segundo Piso">
<option id="5" value="5">Laboratorio de Biología</option>
<option id="6" value="6">Bienestar Universitario</option>
<option id="7" value="7">Registro</option>
<option id="8" value="8">Agencia Bancaria</option>
<option id="9" value="9">Librería</option>
</optgroup>
<optgroup label="Unidades Academicas">
<option id="10" value="10">Unidades Academicas</option>
<option id="11" value="11">Dirección Psicología</option>
<option id="12" value="12">Medicina</option>
<option id="13" value="13">Ciencias Administrativas</option>
<option id="14" value="14">Odontología</option>
<option id="15" value="15">Civil</option>
<option id="16" value="16">Industrial</option>
<option id="17" value="17">Computación</option>
<option id="18" value="18">Arquitectura</option>
<option id="19" value="19">Estudios Generales</option>
<option id="20" value="20">Derecho</option>
<option id="21" value="21">Enfermería</option>
</optgroup>
<optgroup label="Tercer Piso">
<option id="22" value="22">Recepción</option>
<option id="23" value="23">Contabilidad</option>
<option id="24" value="24">Recursos Humanos</option>
<option id="25" value="25">Dirección de Campus</option>
<option id="26" value="26">Dirección Administrativa</option>
<option id="27" value="27">Dirección de Postgrado</option>
<option id="28" value="28">Marketing</option>
<option id="29" value="29">Compras</option>
<option id="30" value="30">C.T.I.T</option>
<option id="31" value="31">Biblioteca</option>
</optgroup>
<optgroup label="Cuarto Piso">
<option id="32" value="32">Investigación</option>
</optgroup>
</select>
</div>
<div class="contain_form">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!--JavaScript at end of body for optimized loading-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
</body>
</html>
$(document).ready(function () {
$('select').formSelect();
$('select.select_todo').siblings('ul').prepend('<li id=sm_select_todo><span>Seleccionar Todo</span></li>');
$('li#sm_select_todo').on('click', function () {
var jq_elem = $(this),
jq_elem_span = jq_elem.find('span'),
select_todo = jq_elem_span.text() == 'Seleccionar Todo',
poner_texto = select_todo ? 'Quitar Selección' : 'Seleccionar Todo';
jq_elem_span.text(poner_texto);
jq_elem.siblings('li').filter(function () {
return $(this).find('input').prop('checked') != select_todo;
}).click();
});
$('.select_todo ').change(function () {
if ($(":selected", this).length > 0) {
var count = $(":selected", this).length;
var htmlToInsert = "";
for (var i = 0; i <= count; i++) {
htmlToInsert = '<div class = "card-panel hoverable" id="departament' + i + '">' + '<label>Calificación:</label><br>' + '<form action="#">'
+ '<label>' + ' <input class="with-gap" id="uno" name="group1" type="radio" value="1" checked />' + '<span>1</span>' + ' </label>'
+ '<label>' + '<input class="with-gap" id="dos" name="group1" type="radio" value="2"/>' + '<span>2</span>' + '</label>'
+ '<label>' + ' <input class="with-gap" id="tres" name="group1" type="radio" value="3" />' + ' <span>3</span>' + '</label>'
+ ' <label>' + ' <input class="with-gap" id="cuatro" name="group1" type="radio" value="4"/>' + ' <span>4</span>' + ' </label>'
+ ' <label>' + ' <input class="with-gap" id="cinco" name="group1" type="radio" value="5"/>' + ' <span>4</span>' + ' </label>'
+ '</form>'
+ '<div class="row">' + ' <form class="col s12">' + ' <div class="row">' + ' <div class="input-field col s12">' + ' mode_edit' + ' <textarea id="icon_prefix2' + i + '" class="materialize-textarea"></textarea>' + ' <label for="icon_prefix2' + i + '">Comentarios</label>' + ' </div>' + ' </div>' + ' </form>' + ' </div>'
+ ' <div class="input-field">' + ' <label for="bol1' + i + '">Fecha de su visita</label>' + ' <input id="bol1' + i + '" type="text" class="datepicker" readonly="readonly">' + ' </div>' + ' <div class="input-field">' + ' <label for="bol' + i + '">Hora de su visita</label>' + ' <input id="bol' + i + '" type="text" class="timepicker" readonly="readonly">' + ' </div>' + ' </div>'
}
$('.contain_form').append(htmlToInsert);
$('.datepicker').datepicker();
$('.timepicker').timepicker();
} else {
$('.contain_form').empty();
}
});
$("#select_seasons").change();
});