Quiero copiar opciones de selección múltiple al área de texto. Escribí el código y funciona bien hasta que cambio el valor en el cuadro de área de texto, por ejemplo, cuando agrego algo. Después de agregar caracteres adicionales al área de texto, la función de copia JS no funciona. ¿Por qué? Este es el código:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <form class="form multiple-select-form form-move"> <div class="row"> <div class="col-1-2">Multiselect:<br/> <select id="source_select" multiple="multiple" style="width: 500px; height:200px"> <option value="option 1"> option 1 </option> <option value="option 2"> option 2 </option> <option value="option 3"> option 3 </option> <option value="option 4"> option 4 </option> <option value="option 5"> option 5 </option> </select> </div> <div class="col-1-2"><br/><br/>Textarea:<br/> <textarea name="text_to_db" id="target_textarea" style="width: 500px; height:200px"></textarea> </div> </div> <div class="row"> <div class="col-1-1"><br/> <button type="button" onclick="myFunction()">Copy multiselect to textarea</button> </div> </div> </form> <script> function myFunction() { if (document.getElementById("source_select").length > 0) { for (let i=0; i < document.getElementById("source_select").length; i++){ const option = document.getElementById("source_select").options[i]; const value = option.value; if (option.selected) { let nowy_tekst = document.getElementById("target_textarea").innerHTML + value + ", "; document.getElementById("target_textarea").innerHTML = nowy_tekst; // option.remove(); } } } } </script> </body> </html>Debe usar .value en lugar de .innerHTML ya que textarea es un elemento de formulario.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <form class="form multiple-select-form form-move"> <div class="row"> <div class="col-1-2">Multiselect:<br/> <select id="source_select" multiple="multiple" style="width: 500px; height:200px"> <option value="option 1"> option 1 </option> <option value="option 2"> option 2 </option> <option value="option 3"> option 3 </option> <option value="option 4"> option 4 </option> <option value="option 5"> option 5 </option> </select> </div> <div class="col-1-2"><br/><br/>Textarea:<br/> <textarea name="text_to_db" id="target_textarea" style="width: 500px; height:200px"></textarea> </div> </div> <div class="row"> <div class="col-1-1"><br/> <button type="button" onclick="myFunction()">Copy multiselect to textarea</button> </div> </div> </form> <script> function myFunction() { if (document.getElementById("source_select").length > 0) { for (let i=0; i < document.getElementById("source_select").length; i++){ const option = document.getElementById("source_select").options[i]; const value = option.value; if (option.selected) { let nowy_tekst = document.getElementById("target_textarea").value + value + ", "; document.getElementById("target_textarea").value = nowy_tekst; // option.remove(); } } } } </script> </body> </html>