0
174
VistasAgregue un nuevo elemento a la etiqueta <p> y asígnelo a la lista desplegable dinámicamente
Estoy creando un sitio web que permite al usuario agregar un nuevo grupo al grupo existente. En el grupo existente ya tiene tres grupos fijos que son It, cleaning, accountant , por lo que mi idea era permitir que el usuario agregara el nombre del grupo haciendo clic en submit y su campo de entrada se enviará a la etiqueta <p> vacía (por ejemplo: enfermera, médico .. y así sucesivamente diferenciar cuál coma , ). Aparte de eso, después de poder obtener el grupo agregado existente y el nuevo, necesito agregar dinámicamente los grupos completos a una lista desplegable. (eg: It, cleaning, accountant, nurse, doctor) .
Sé que stackoverflow no es un servicio de escritura de código, pero realicé mi propia investigación antes de publicar esta pregunta y no pude encontrar ningún recurso útil. Así que cualquiera que esté dispuesto a guiarme será muy apreciado. Gracias por adelantado
Plantilla actual:
Rendimiento esperado:
Código completo:
<!DOCTYPE html> <html> <body> <h1>Existing Group</h1> <p>IT, Cleaning, Accountant</p> <h1>Add New Group</h1> <p></p> <input type="tel" id="group" name="group" placeholder="enter group name"> <br><br> <button type="button" class="btn btn-primary btn-sm">Submit</button> <h1>Drop Down List</h1> <label for="group">Choose a group:</label> <select name="group" id="group"> <option value="IT">IT</option> <option value="Cleaning">Cleaning</option> <option value="Accountant">Accountant</option> </select> </body> </html>2 Respuestas
Responde la pregunta0
En este caso, deberá usar JavaScript según sus requisitos para agregar el nodo adicional de la siguiente manera:
Puro JS:
var result = document.getElementById("group"); var tag = document.createElement("option"); tag.setAttribute("value",result.value) var text = document.createTextNode(result.value); tag.appendChild(text); var element = document.getElementById("groupSelect"); element.appendChild(tag);Tenga en cuenta que tiene 2 elementos con la misma ID (grupo), lo que hará que la mayoría de su JS se bloquee. También tenga en cuenta que también puede usar Jquery, que también podría ser un poco más fácil
0
Necesitas usar JavaScript.
Primero, usa addEventListener() para escuchar cuando el usuario hace clic en el botón Enviar. Luego, obtenemos el valor de la entrada y lo separamos por comas con input.value.split(',') . Luego, recorremos los valores, creamos una nueva etiqueta <option> y la agregamos a la etiqueta <select> .
Además, tiene dos elementos con id="group" , por lo que debe cambiar uno de ellos. Cambié <select> a id="group-select" .
const submit = document.querySelector('button'); const input = document.querySelector('input'); const select = document.querySelector('select'); const myP = document.querySelector('p#myP'); submit.addEventListener('click', function(e) { const values = input.value.split(','); if (myP.innerText == '') { myP.innerText = values; } else { myP.innerText += ', ' + values; } for (let i in values) { const new_option = document.createElement('option'); new_option.value = values[i]; new_option.innerText = values[i]; select.appendChild(new_option); } }); <!DOCTYPE html> <html> <body> <h1>Existing Group</h1> <p>IT, Cleaning, Accountant</p> <h1>Add New Group</h1> <p id="myP"></p> <input type="tel" id="group" name="group" placeholder="enter group name"> <br><br> <button type="button" class="btn btn-primary btn-sm">Submit</button> <h1>Drop Down List</h1> <label for="group">Choose a group:</label> <select name="group" id="group-select"> <option value="IT">IT</option> <option value="Cleaning">Cleaning</option> <option value="Accountant">Accountant</option> </select> </body> </html>