Javascript表单中的多个输入

Question

I want to create an assign form, for example user select teacher A for subject A but user can press a button to add more teacher to subject A. I heard this can be done by Javascript but I dont know how.

                  <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>```

Answer 1

If you want user/student A to select multiple teachers for Subject Maths(example), you can use select with checkbox because the user doesn't know how many teachers are available for a particular subject.

Further, you can also implement check/uncheck all functionality

 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>

Answer 2

Well.. IDK if this going to make you like it? I'm making the button to add a selected teacher into Array[] call "teachers" then remove selected teacher from options. I hope you can figure the rest?

Here's my example: https://onecompiler.com/html/3xg4q9e3p