No necesitas de JQuery para dicha tarea, alcanza con que hagas lo siguiente:
- A la etiqueta
select
dale una clase, lo mismo que para eltextarea
- Recuperas y asignas en variables a los 2 elementos antes mencionados
- Como deseas asignar en el
textarea
el valor que el usuario obtiene delselect
entonces debes agregar un listener que vigile el eventochange
- 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
deltextarea
recién recuperado le asignas la variableopcion
que de forma dinámica nos estará retornando el valor delselect
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>