1

Tengo un select con varias opciones que obtengo de la base de datos, algo así:

<select class="custom-select ingredientesselect">
                        <option selected>Seleccione un ingrediente</option>
                        <option value="1">Hola</option>
                        <option value="2">Como</option>
                        <option value="3">Estas</option>
                        <option value="4">Espero</option>
                        <option value="5">Bien</option>
                                                  
</select>
<textarea class="form-control muestraingredientes"></textarea>

Excepto que el value y el nombre lo muestro con php.

Lo que quiero hacer es que al seleccionar un option, me muestre el texto del value en un textarea. Que me muestre el "hola", "como", etc.

Estoy intentando usar este script de JQuery pero no me muestra nada.

$('select.ingredientesselect').change(function() {
            var valor = $('textarea').val();
            $('textarea.muestraingredientes').val(valor + $(this).text()); 
        });

2 respuestas 2

1

Opción 1

  • 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

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", (event) => {
          let opcion = event.target.value
          textoArea.innerText = opcion
        })
    </script>
      
    </body>
    </html>

EDICIÓN OPCIÓN 2

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 = event.target.value
          textoArea.append(opcion)
        })
    </script>
      
    </body>
    </html>

9
  • gracias, me funciono, pero tengo dos preguntas. Como puedo hacer para que no me borre el anterior valor? Y que es eso de "let"? Solo manejo un poco de JQuery, por eso preguntaba con una solución parecida a la que tenia. Commented el 11 jun. 2020 a las 1:23
  • @ValeAsencioUribe let es el identificador para declarar variables en JavaScript, considero que deberías aprender mejor el lenguaje en lugar de JQuery, por otro lado dejame ver como modifico para lo que preguntas
    – user128299
    Commented el 11 jun. 2020 a las 1:24
  • @ValeAsencioUribe revisa lo que edité al final de mi respuesta para ver si te ayuda
    – user128299
    Commented el 11 jun. 2020 a las 1:29
  • siiiiii, ahi si se puede, y si no es mucha la molestia jejeje sabes como puedo hacerle un salto de linea cada vez que agrego un select al textarea? Commented el 11 jun. 2020 a las 1:43
  • Si claro dame un momento @ValeAsencioUribe
    – user128299
    Commented el 11 jun. 2020 a las 1:45
1

intenta probarlo de esta manera:

$('select.ingredientesselect').change(function() {
            var valor = $('textarea').val() ;
            $('textarea.muestraingredientes').val(valor + $('select.ingredientesselect option:selected').text()); });

Revisa este ejemplo reutilizando tu código:

https://jsfiddle.net/9ga8c3w5/

3
  • asi lo intente, pero pasa lo que dice BetaM, por eso no supe como hacerlo. Commented el 11 jun. 2020 a las 1:41
  • De acuerdo, los valores los puedes concatenar utilizando el simbolo "+" o también inner en el mismo código. Como está el código si aplica lo que buscas dado que aumenta la cadena según las selección en el select. Commented el 11 jun. 2020 a las 1:45
  • @Manuel Camacho ohhh si vi, muchisimas graciaas!!!!! <3 Commented el 11 jun. 2020 a las 1:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.