Modificar select según valor

[lightmoon]

Hola a todos.

Estoy intentando buscar una solución a un problema que realizándolo en escritorio no tenía especial complejidad, pero utilizando php + js (Jquery) me resulta difícil.

Tengo dos etiquetas "select", una indica la empresa y la otra el ejercicio. Lo que pretendo es que cuando se seleccione una valor de empresa distinto, el select con los ejercicios cambie según los valores de la empresa.

Ejemplo:

Empresa Ejercicios
1 2015
1 2016
2 2016

¿sabéis de que forma óptima se puede llevar a cabo?. Supongo que con Ajax se deberá ir a una página php para recoger los valores, pero , de esa forma me surgen más dudas. Es necesario pasar un array con los valores de php a Ajax(jquery), ¿Cómo se recorre el valor de data siendo un array?.

Espero haberme explicado.

¡Gracias!

Un saludo.

[Alexis88]

Puedes retornar un array de valores desde PHP o bien formar al <select> con las opciones. Por ejemplo, supongamos que el <select> está en un <div>, entonces, lo que tendrías que hacer en ambos casos sería algo similar a lo siguiente:

Código HTML:

<div id = "contenedor">
    <select id = "ejemplo"></select>
</div>
 

Código Javascript:

var ajax = new XMLHttpRequest(), respuesta, propiedad, opcion, //Las variables a utilizar
    select = document.querySelector("#ejemplo"); //Para el primer caso
    div = document.querySelector("#contenedor"); //Para el segundo caso
ajax.open("GET", "ejemplo.php", true);
ajax.send();
ajax.addEventListener("load", function(){
    if (this.status == 200){
        //PRIMER CASO: Llenando al <select> con valores llegados en un objeto JSON
        respuesta = JSON.parse(this.responseText);
        select.innerHTML = "";
        for (propiedad in respuesta){
            opcion = document.createElement("option");
            opcion.value = propiedad;
            opcion.text = respuesta[propiedad];
            select.add(opcion);
        }
 
        //SEGUNDO CASO: Reemplazando el <select> actual por uno nuevo llegado como respuesta
        respuesta = this.responseText;
        div.innerHTML = respuesta;
    }
}, false);
 

Código PHP:

<?php
//PRIMER CASO
$array = [
    'valor1' => 'Texto1',
    'valor2' => 'Texto2',
    'valor3' => 'Texto3',
    'valorN' => 'TextoN',
];
echo json_encode($array);
 
//SEGUNDO CASO
?>
<select>
<?php
foreach ($array as $valor => $texto){
?>
    <option value = "<?php echo $valor; ?>"><?php echo $texto; ?></option>
<?php
}
?>
</select>
 

En el primer caso, elaboras un array que contendrás índices y valores los cuales corresponderán a cada valor y texto de las opciones del <select>. Como no es posible devolver un array directamente, hay que codificarlo en formato JSON de tal forma que en la llamada asíncrona (AJAX) lo parseas para obtener al objeto y así poder recorrer su lista de atributos y valores. En el segundo caso, solo tienes que formar al <select> en el archivo PHP y en la llamada asíncrona, solo tendrás que insertarla como contenido del contenedor.

NOTA: Los bloques de código en donde señalo que se trata del primer o segundo caso, es para que elijas solo uno de ambos bloques, no los dos a la vez.

Un saludo

[lightmoon]

Gracias Alexis88.

Voy a probar ambos casos y comento el resultado. Lo que veo es que el segundo caso, aunque más práctico, las funciones de php solo servirían para crear de nuevo el selct. Estudiaré como hacerlo, ya que estoy haciendo un ERP a medida para una empresa. ¡¡¿¿Quién me mandaría a aceptar hacerlo en web!!?? jajajaja. Veo la programación más lenta en web que en un raid de escritorio.

Un saludo.