Llenar un select a partir de la opcion elegida en otro select

[silvanha]

Es completamente necesario que sea con JavaScript?????, porque digo hay muchas maneras una de ellas es con AJAX y te facilita la vida de manera impresionante.. porque no te metes en líos con la comunicación entre JavaScript y PHP, porque por ende AJAX ya tiene esa parte..

te traigo un ejemplo, lo he hecho con miles de cosas, este en especifico lo hace con estados y municipios:

Cargo el estado:

Código PHP:

<select disabled="disabled" name="cboestado" id="cboestado" onchange="cargaMunicipios(this.id);">
                  <option value="0">Seleccione Estado</option>
                <?php $consulta = $db->listadatos(($db->consulta("*","catalogo_estados")));
                foreach($consulta as $datos){  
                 echo "<option value='".$datos->Id_Estado."'>".htmlentities($datos->Nombre_Estado)."</option>";
                } ?>
                </select>
 

Y aparte dentro del código, pongo un select vacio, que será el que se carge con respecto al estado seleccionado..

Código HTML:

<select disabled="disabled" name="cbomunicipio" id="cbomunicipio">
                    <option value='0'>Seleccione Estado</option>
                </select>
 

En el primer select uso unos metodos de conexión a la BD, y tanta cosa, pero es lo mismo que tu has hecho con las publicaciones, el caso de los municipios sería el de las ediciones, en fin, el evento que uso para cargar los municipios si ves, es en un OnChange, al que llamo cargamunicipios , y este es un metodo de AJAX.

Aqui tengo el Objeto AJAX, que se crea y después la función de AJAX que hace el trabajo de cargar los datos:

Código Javascript:

function nuevoAjax(){ 
    /* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por
    lo que se puede copiar tal como esta aqui */
    var xmlhttp=false;
    try{
        // Creacion del objeto AJAX para navegadores no IE
        xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch(e){
        try{
            // Creacion del objet AJAX para IE
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(E){
            if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp=new XMLHttpRequest();
        }
    }
    return xmlhttp; 
}
 
function cargaMunicipios(idSelectOrigen){
    // Obtengo el select que el usuario modifico
    var selectOrigen=document.getElementById(idSelectOrigen);
    // Obtengo la opcion que el usuario selecciono
    var opcionSeleccionada=selectOrigen.options[selectOrigen.selectedIndex].value;
    // Si el usuario eligio la opcion "Elige", no voy al servidor y pongo los selects siguientes en estado "Selecciona estado..."
    if(opcionSeleccionada==0)
    {
        var selectActual=null;
        if(idSelectOrigen == "cboestado")
            selectActual=document.getElementById("cbomunicipio");
        selectActual.length=0;
        var nuevaOpcion=document.createElement("option"); 
        nuevaOpcion.value=0; 
        nuevaOpcion.innerHTML="Seleccione Estado";
        selectActual.appendChild(nuevaOpcion);  
        selectActual.disabled=true;
    }
    // Compruebo que el select modificado no sea el ultimo de la cadena
    else{
        if(idSelectOrigen == "cboestado")
            var selectDestino=document.getElementById("cbomunicipio");
        // Creo el nuevo objeto AJAX y envio al servidor la opcion seleccionada del select origen
        var ajax=nuevoAjax();
        ajax.open("GET", "../llena_municipios.php?opcion="+opcionSeleccionada+"&select="+idSelectOrigen, true);
        ajax.onreadystatechange=function() 
        { 
            if (ajax.readyState==1)
            {
                // Mientras carga elimino la opcion "Selecciona Opcion..." y pongo una que dice "Cargando..."
                selectDestino.length=0;
                var nuevaOpcion=document.createElement("option"); 
                nuevaOpcion.value=0; 
                nuevaOpcion.innerHTML="Cargando...";
                selectDestino.appendChild(nuevaOpcion); 
                selectDestino.disabled=true;    
            }
            if (ajax.readyState==4)
            {
                selectDestino.parentNode.innerHTML=ajax.responseText;
            } 
        }
        ajax.send(null);
    }
}
 

Si te das cuenta la funcion cargaMunicipios, es la que llama a otro archivo ahora si en PHP, que será en donde hagas la consulta,

Código PHP:

llena_municipios.php?opcion="+opcionSeleccionada+"&select="+idSelectOrigen
 

nota que le envió el select en el que debe cargar y el estado seleccionado.. y en este último archivo genero la consulta:

Código PHP:

if($selectOrigen == "cboestado")
    echo "<select name='cbomunicipio' id='cbomunicipio'>";
echo '<option value="0">Seleccione Municipio</option>';
    $consulta = $db->listadatos(($db->consulta("*","catalogo_municipio","Id_Estado=".$opcionSeleccionada)));
    foreach($consulta as $datos){  
         echo "<option value='".$datos->Id_Municipio."'>".htmlentities($datos->Nombre_Municipio)."</option>";
    }
echo "</select>";
 

Verifico que sea el combo de Estados el seleccionado y mando a imprimir XD (inclusive lo puedes hacer con el número de combos que necesites.. ) y ya.. solito funciona.. son varios archivos pero nada del otro mundo =)

suerte!, si tienes dudas ahí ando!! =)

PD: Me agarraste con tiempo para pegarte todo jajajajaja saludos! ;)