3

Tengo un desplegable de opciones, un "select", y quiero que al seleccionar una opción se me llenen automáticamente varios campos input que tengo en un formulario.

La idea principal es que a partir de una selección de un problema concreto, se me llenen los campos de solución, material y tiempo, que voy a recuperar de una base de datos.

He encontrado varias soluciones en JavaScript, y la que se acerca más sólo rellena uno de los campos input, y yo necesito que sean almenos tres.

Os dejo el código de esta solución, a ver si se puede "personalizar" para que rellene varios. Lo he probado pero no encuentro una solución que funcione.

<form>

    <script type="text/javascript">

        // funcion que se ejecuta cada vez que se selecciona una opción

        function cambioOpciones()

        {

            document.getElementById('showId').value=document.getElementById('opciones').value;

        }

    </script>

 

    <select id='opciones' onchange='cambioOpciones();'>

        <option value=''>Selecciona una opción</option>

        <option value='1'>Opción 1</option>

        <option value='2'>Opción 2</option>

        <option value='3'>Opción 3</option>

    </select>

 

    <!-- input donde se mostrara el id de la opción -->

    <input type='text' id='showId' />

</form>

Gracias!

3
  • no entiendo tu problema. Al igual que rellenas ese (document.getElementById('showId').value = ...) puedes rellenar otros, pasando su id
    – lois6b
    Commented el 10 may. 2017 a las 8:40
  • Ya lo he probado, pero no consigo rellenar varios inputs con el mismo select, con información diferente.
    – eduardsb
    Commented el 10 may. 2017 a las 8:47
  • Utiliza la biblioteca jQuery-ui autocomplete. Hay una específica para los campos SELECT: toma de ella los datos. ¿Para qué escribir código si ya existe? Commented el 20 jun. 2018 a las 17:44

3 respuestas 3

2

Si creas un objeto, por ejemplo opciones, y ahi metes los valores que traigas de la bd, luego puedes ir asignandolos en cambioOpciones()

var opciones = {
  //solución, material y tiempo
  "0": [""         , ""         , ""],
  "1": ["solucion1", "material1", "tiempo1"],
  "2": ["solucion2", "material2", "tiempo2"],
  "3": ["solucion3", "material3", "tiempo3"],
  "4": ["solucion4", "material4", "tiempo4"]
}

function cambioOpciones()

{
  var combo = document.getElementById('opciones');
  var opcion = combo.value;
  
 
  document.getElementById('solucion').value = opciones[opcion][0];

  document.getElementById('material').value = opciones[opcion][1];

  document.getElementById('tiempo').value = opciones[opcion][2];
  

}
<form>

  <select id='opciones' onchange='cambioOpciones();'>

        <option value='0'>Selecciona una opción</option>

        <option value='1'>Opción 1</option>

        <option value='2'>Opción 2</option>

        <option value='3'>Opción 3</option>

        <option value='4'>Empresa D</option>

    </select>
  <!-- input donde se mostrara el id de la opción -->
  <br> Solucion <input type='text' id='solucion' />
  <br> Material <input type='text' id='material' />
  <br> Tiempo <input type='text' id='tiempo' />

</form>

4
  • ¿Cómo podría tomarla de una base de de datos? ¿O cómo puedo poblar las opciones de la base de datos el objeto "opciones"? Saludos. Commented el 13 nov. 2017 a las 16:15
  • 1
    Hola @FernandaPichardo. Con PHP la comunicacion con base de datos y con JS no es muy complicada. Te sugiero que busques informacion (puede que en este sitio ya haya preguntas que traten el tema de sacar o meter informacion de una Base de datos con PHP ) o por internet. Si cuando lo hayas intentado, tienes problemas, pulsa arriba a la derecha en Formula una pregunta y explicanos tu problema siguiendo Cómo preguntar. Un saludo ^^
    – lois6b
    Commented el 13 nov. 2017 a las 16:20
  • Esta es la pregunta más parecida a mi problema: Tengo un select y necesito poblar varios campos con base a la opción seleccionada. Intenté con la herramienta Autocomplete de JQuery pero no me funciona del todo. Por eso pregunto cómo puedo llenar esas opciones con base de datos. Saludos :) Commented el 13 nov. 2017 a las 16:22
  • @FernandaPichardo en esta pregunta no se trata el tema de base de datos, se supone que esa parte ya está funcionando. Si has probado ya con jQuery, haz una pregunta en el sitio para poder ayudarte ^^
    – lois6b
    Commented el 13 nov. 2017 a las 16:24
1

Podrías jugar a crear una variable elementData con los valores que recuperes de la base de datos y jugar a relacionarlos con los identificadores de los otros campos input

<form>
    <script type="text/javascript">

        // Debes obtenerlo de la base de datos, esto es un ejemplo
        var elementData = {
            '1':{otherElement1:"value1", otherElement2:"value1"},
            '2':{otherElement1:"value2", otherElement2:"value2"},
            '3':{otherElement1:"value3", otherElement2:"value3"},
        };

        // funcion que se ejecuta cada vez que se selecciona una opción
        function cambioOpciones(){

            if(optionId.length){
                var optionId = document.getElementById('opciones').value;
                var otherElementDataValue1 = elementData[optionId].otherElement1;
                var otherElementDataValue2 = elementData[optionId].otherElement2;

                document.getElementById('showId').value=document.getElementById('opciones').value;
                document.getElementById('otherElement1').value=otherElementDataValue1;
                document.getElementById('otherElement2').value=otherElementDataValue2
            }else{
                document.getElementById('showId').value="";
                document.getElementById('otherElement1').value="";
                document.getElementById('otherElement2').value="";
            }
        }
    </script>

    <select id='opciones' onchange='cambioOpciones();'>
        <option value=''>Selecciona una opción</option>
        <option value='1'>Opción 1</option>
        <option value='2'>Opción 2</option>
        <option value='3'>Opción 3</option>
    </select>

    <!-- input donde se mostrara el id de la opción -->
    <input type='text' id='showId' />
    <input type='text' id='otherElement1' />
    <input type='text' id='otherElement2' />
</form>
1
  • Gracias por el soporte! :)
    – eduardsb
    Commented el 10 may. 2017 a las 16:21
1

La idea principal es que a partir de una selección de un problema concreto, se me llenen los campos de solución, material y tiempo, que voy a recuperar de una base de datos.

Para solucionar cualquier problema, primero analiza qué necesitas hacer para obtener el resultado esperado:

  1. Suscribirte al evento change del desplegable.
  2. En cada evento, enviar el valor del desplegable a la API para traer los datos X que le correspondan.
  3. Obtener los datos como JSON y mostrarlos en las cajas de texto.
function cambioOpciones (newVal) {
  axios.get(`/api/algo?opcion=${newVal}`)
  .then(function({ data }) {
     document.getElementById('solucion').value = data.solucion
     document.getElementById('material').value = data.material
     document.getElementById('tiempo').value = data.tiempo
  })
}

La función anterior recibe el nuevo valor del desplegable cada vez que cambia (onchange="cambioOpciones(this.value)") y procede a realizar una petición AJAX a la API que realizará una consulta a la base de datos para traer los datos que le corresponden a la opción elegida. Finalmente, solo agregas los datos obtenidos en los inputs.

Te recomiendo vayas echándole un ojo a frameworks cliente como Vue, estos frameworks te automatizan gran parte del trabajo JavaScript/HTML.

3
  • Gracias! Probaré las dos opciones, esta y la de más arriba.
    – eduardsb
    Commented el 10 may. 2017 a las 14:16
  • Hola que tal, tengo una duda, que es exactamente lo que se le pasa a get en esta parte /api/algo?opcion=${newVal} Commented el 18 oct. 2021 a las 15:02
  • 1
    @DavidRamírezC. Se le pasa el valor que se ha seleccionado en el select.
    – gugadev
    Commented el 20 oct. 2021 a las 23:56

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.