Combo Anidado hacia Varios selectores en una sola variable

Ojopex2 · #1 (**permalink**) 27/02/2011, 00:01

Hola amigos, no se mucho de javascript y ajax, y necesito un consejo y espero que me puedan ayudar.

Necesito hacer un combo anidado, pero este tiene la particularidad de en vez al seleccionar uno, aparezca un combo, sino que necesito que se me desplieguen los datos en 3 selectores multiples distintos, me explico mejor con una imagen.

O sea, en el combo elijo que tipo de reloj es y en los selectores multiples de abajo me tienen que aparecer cada tarea perteneciente a cada área según el tipo de mecanismo elegido, algunas tareas son comunes y otras no, por eso esta forma.

El tema lo tengo parcialmente avanzado, ya que conozco como pasar de un combo a otro y entiendo algo el proceso que hace. Este es el código que tengo (claramente no es mio en la parte JS):

Tengo un html que dice lo siguiente (No está completo, pero tiene lo que se necesita):

Código HTML:

Ver original<head>
<script src="js/base_xml.js"></script>
</head>
<body>
<form>
<select name="cmbTipomachine" onchange="traerBases(this.value)">
                <option value="0">- Seleccione -</option>
                <option value="1">Reloj Quarzo</option>
                <option value="2">Reloj Automático</option>
                <option value="3">Crono Quarzo</option>
                <option value="4">Crono Automático</option>
                <option value="5">Electromecánico</option>
                <option value="6">Otros</option>
                </select>
<select name="base" size="4" multiple="MULTIPLE" id="datosBase"></select>
<select name="mecha" size="4" multiple="MULTIPLE" id="datosMecha" >/select>
<select name="caja" size="4" multiple="MULTIPLE" id="datosCaja"></select>
<select name="pulsera" size="4" multiple="MULTIPLE" id="datosPulsera"></select>
</form>
<div id='ajax_indicator' style='visibility: hidden'>Cargando datos...</div>
<body>

Luego el JS en cuestión base_xml.js":

Código Javascript:

Ver originalvar xmlHttp;
 
function traerBases(str) {
 
    if (str == '0' ) {
        document.getElementById('datosBase').options.length = 0;
        return false;
    }
 
    xmlHttp = GetXmlHttpObject();
    
    if (xmlHttp == null) {
        alert("Your browser does not support AJAX!");
        return;
    }
 
    var url = "relqtz_xml.php";
    url = url + "?q=" + str;
    url = url + "&sid=" + Math.random();
 
    xmlHttp.onreadystatechange = stateChanged;
    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);
    
    document.getElementById('ajax_indicator').style.visibility = 'visible';
}
 
function stateChanged() { 
 
    if (xmlHttp.readyState == 4) {
 
        document.getElementById('ajax_indicator').style.visibility = 'hidden';
 
        if (xmlHttp.status != 200) {
            alert('Ocurrio un error! Server: ' + xmlHttp.statusText);
            return false;
        }
 
        // limpiar combo-box
        document.getElementById('datosBase').options.length = 0;
 
        // obtener objeto con estructura del XML
        var xmlDoc = xmlHttp.responseXML.documentElement;
 
        // obtener cantidad total de elementos con etiqueta <comuna>
        var totalElementos = xmlDoc.getElementsByTagName("rquarzo").length;
 
        for (var i = 0; i < totalElementos; i++) {
 
            // obtener elemento comuna posicion i
            var rquarzo             = xmlDoc.getElementsByTagName("rquarzo")[i];
 
            // obtener valores del atributo "id" y del texto
            var idElemento      = rquarzo.attributes.getNamedItem("id").value;
            var textoElemento   = rquarzo.firstChild.nodeValue
 
            // agregar nueva opcion al combo-box
            document.getElementById('datosBase').options.add(new Option(textoElemento, idElemento));
        }
    }
}
 
function GetXmlHttpObject() {
 
    var xmlHttp = null;
 
    try {
        // Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();
    }
    catch (e) {
        // Internet Explorer
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
 
    return xmlHttp;
}

Y finalmente el PHP donde hago la consulta a la base de datos donde se encuentra.

Código PHP:

Ver original<?php
 
header('Content-Type: text/xml');
 
// sleep(1);
 
if (isset($_GET["q"]) and is_numeric($_GET["q"])) {
 
    $q = $_GET["q"]; 
    include('includes/conexion.php'); 
 
    $sql = ("SELECT id_tareas, tarea FROM tareas_esp
            INNER JOIN tareas_area_trabajo ON tareas_esp.id_tareas = tareas_area_trabajo.tareas_id_tareas
            INNER JOIN area_trabajo ON tareas_area_trabajo.area_trabajo_id_area_trabajo = area_trabajo.id_area_trabajo
            INNER JOIN tipo_maquina_area ON area_trabajo.id_area_trabajo = tipo_maquina_area.id_area
            INNER JOIN tipos_maquinas ON tipo_maquina_area.id_tipo_maquina = tipos_maquinas.id_tipos_maquinas
            WHERE id_tipo_maquina = $q AND id_area = 1 "); // Esto es clave, siempre será $q, pero no siempre será id_area=1, ya que cambia dependiendo del area a la cual pertenece el grupo de tareas.
 
    $result = mysql_query($sql, $link);
 
    echo '<?xml version="1.0" encoding="ISO-8859-1"?><rquarzos>';
 
    while($row = mysql_fetch_row($result)) {
        echo '<rquarzo id="' . $row[0] . '">' . $row[1] . '</rquarzo>';
    }
 
    echo "</rquarzos>";
 
    mysql_close();
 
}
 
?>

Entonces lo que hace el código que en onchange="traerBases(this.value)" llama a la función traerBases que lo que hace es pasar el $q que es el id respectivo del combo y luego ejecuta el query que se le asigna. Y se agregan los items con XML.

Entonces tengo que tener 4 archivos php y 4 archivos js distintos, pero que se llame a la misma función desde el onchange

Sino juntar todas las funciones en una sola y que haga las 4 consultas en una (¿Es lo más logico?)

En el fondo, ¿Cómo puedo juntar las 4 consultas correspondientes para que actuen en conjunto, algún IF o algo asi?

Espero que se me haya comprendido, si hace falta algún dato con respecto a la base de datos, me dicen (Que no creo ya que el query ya está hecho).

Saludos y gracias de antemano.

PD: este tema lo había hecho con anterioridad, pero ahora lo hago denuevo con mas claridad y base.

Ojopex2 · #2 (**permalink**) 05/03/2011, 00:16

Ya lo solucioné, más adelante les cuento como, por si a alguien le sirve.