Skip to main content
3 de 6
se añadieron 1647 caracteres en el cuerpo
user avatar
user avatar

No necesitas de JQuery para dicha tarea, alcanza con que hagas lo siguiente:

  • A la etiqueta select dale una clase, lo mismo que para el textarea
  • Recuperas y asignas en variables a los 2 elementos antes mencionados
  • Como deseas asignar en el textarea el valor que el usuario obtiene del select entonces debes agregar un listener que vigile el evento change
  • Cuando estés vigilando el evento antes mencionado, guardas en uan variable el valor recuperado a través de: let opcion = opciones.options[opciones.options.selectedIndex].value
  • Finalmente a la propiedad innerText del textarea recién recuperado le asignas la variable opcion que de forma dinámica nos estará retornando el valor del select elegido

Código:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Ejemplo en JS</title>
    </head>
    <body>
    <select name="" id="" class="opciones">
      <option value="Cero" class="opcion">-------------</option>
      <option value="Uno" class="opcion">Uno</option>
      <option value="Dos" class="opcion">Dos</option>
      <option value="Tres" class="opcion">Tres</option>
      <option value="Cuatro" class="opcion">Cuatro</option>
      <option value="Cinco" class="opcion">Cinco</option>
    </select>
    <br />
    <textarea class="areaTexto" cols="30" rows="10">
      
    </textarea>
    <script>
        let opciones  = document.querySelector(".opciones")
        let textoArea = document.querySelector(".areaTexto")
        
        opciones.addEventListener("change", () => {
          let opcion = opciones.options[opciones.options.selectedIndex].value
          textoArea.innerText = opcion
        })
    </script>
      
    </body>
    </html>

EDICIÓN

Si necesitas que los elementos de tu select se agreguen al espacio del textarea sin perder el anterior elegido, entonces realiza estos cambios:

Modifica esta línea:

textoArea.innerText = opcion

De esta forma:

textoArea.append(opcion)

Quedando así:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
    <select name="" id="" class="opciones">
      <option value="Cero" class="opcion">-------------</option>
      <option value="Uno" class="opcion">Uno</option>
      <option value="Dos" class="opcion">Dos</option>
      <option value="Tres" class="opcion">Tres</option>
      <option value="Cuatro" class="opcion">Cuatro</option>
      <option value="Cinco" class="opcion">Cinco</option>
    </select>
    <textarea class="areaTexto" cols="30" rows="10">
      
    </textarea>
    <input type="text" pattern="[0-9]">
    <script>
        let opciones  = document.querySelector(".opciones")
        let textoArea = document.querySelector(".areaTexto")
        
        opciones.addEventListener("change", () => {
          let opcion = opciones.options[opciones.options.selectedIndex].value
          textoArea.append(opcion)
        })
    </script>
      
    </body>
    </html>

user128299