Skip to main content
Actualización para recuperar el value del option seleccionado
Origen Enlace
user128299
user128299
  • 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].valueevent.target.value (actualizado a la forma recomendada de MDN)
  • 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
    <!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", (event) => {
          let opcion = opciones.options[opciones.optionsevent.selectedIndex]target.value
          textoArea.innerText = opcion
        })
    </script>
      
    </body>
    </html>
    <!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.optionsevent.selectedIndex]target.value
          textoArea.append(opcion)
        })
    </script>
      
    </body>
    </html>
  • 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
    <!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>
    <!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>
  • 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: event.target.value (actualizado a la forma recomendada de MDN)
  • 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
    <!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", (event) => {
          let opcion = event.target.value
          textoArea.innerText = opcion
        })
    </script>
      
    </body>
    </html>
    <!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 = event.target.value
          textoArea.append(opcion)
        })
    </script>
      
    </body>
    </html>
se eliminaron 84 caracteres en el cuerpo
Origen Enlace
user128299
user128299

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

Opción 1

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

Opción 1

Opción 1

se añadieron 29 caracteres en el cuerpo
Origen Enlace
user128299
user128299

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

Opción 1

EDICIÓN OPCIÓN 2

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

EDICIÓN

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

Opción 1

EDICIÓN OPCIÓN 2

se añadieron 1647 caracteres en el cuerpo
Origen Enlace
user128299
user128299
Loading
se añadieron 16 caracteres en el cuerpo
Origen Enlace
user128299
user128299
Loading
Origen Enlace
user128299
user128299
Loading