Quiero crear un formulario de asignación, por ejemplo, el usuario selecciona el teacher A para la subject A , pero el usuario puede presionar un botón para agregar más maestros a la materia A. Escuché que esto se puede hacer con Javascript , pero no sé cómo.
<div class="form-group row"> <label class="col-sm-2 col-form-label">Teacher</label> <div class="form-group"> <select class="form-control" name="teachername"> <option>Sarah</option> <option>Adam</option> <option>Mark</option> <option>Anderson</option> <option>Wood</option> </select> </div> <div class="ml-auto p-2"> <button type="button" class="btn btn-primary">+</button> </div> </div>Si desea que el usuario/estudiante A seleccione varios profesores para Matemáticas de la materia (ejemplo), puede seleccionar con casilla de verificación porque el usuario no sabe cuántos profesores hay disponibles para una materia en particular.
Además, también puede implementar marcar/desmarcar todas las funciones
var expanded = false; var checkboxes = document.getElementById("checkboxes"); var inputs = checkboxes.getElementsByTagName('input') function showCheckboxes() { if (!expanded) { checkboxes.style.display = "block"; expanded = true; } else { checkboxes.style.display = "none"; expanded = false; } } function getSelectedCheckboxValues(name) { const checkboxe = document.querySelectorAll(`input[name="${name}"]:checked`); let values = []; checkboxe.forEach((checkbox) => { values.push(checkbox.value); }); return values; } function mySubmitFunction(e) { e.preventDefault(); console.log(getSelectedCheckboxValues('teacher')); return false; } .multiselect { width: 200px; } .selectBox { position: relative; } .selectBox select { width: 100%; font-weight: bold; } .overSelect { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } #checkboxes { display: none; border: 1px #dadada solid; } #checkboxes label { display: block; } #checkboxes label:hover { background-color: #1e90ff; } .submitBtn { margin-top: 15px; cursor: pointer; } <form onsubmit="return mySubmitFunction(event)"> <div class="multiselect"> <div class="selectBox" onclick="showCheckboxes()"> <select> <option>Select an option</option> </select> <div class="overSelect"></div> </div> <div id="checkboxes"> <label for="first"> <input type="checkbox" name="teacher" value="first" id="first" />First Teacher</label> <label for="second"> <input type="checkbox" name="teacher" value="second" id="second" />Second Teacher</label> <label for="three"> <input type="checkbox" name="teacher" value="three" id="three" />Thrid Teacher</label> <label for="four"> <input type="checkbox" name="teacher" value="four" id="four" />Fourth Teacher</label> <label for="five"> <input type="checkbox" name="teacher" value="five" id="five" />Fifth Teacher</label> </div> <button type="submit" class="submitBtn">Submit</button> </div> </form>Bueno... no sé si esto va a hacer que te guste. Estoy haciendo el botón para agregar un maestro seleccionado en Array[] llamar a "maestros" y luego eliminar al maestro seleccionado de las opciones. Espero que puedas descifrar el resto.
Aquí está mi ejemplo: https://onecompiler.com/html/3xg4q9e3p