Tema: Combo Anidado hacia Varios selectores en una sola variable
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 27/02/2011, 00:01
Ojopex2
 
Fecha de Ingreso: abril-2010
Mensajes: 112
Antigüedad: 14 años, 7 meses
Puntos: 2
Combo Anidado hacia Varios selectores en una sola variable
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
  1. <head>
  2. <script src="js/base_xml.js"></script>
  3. </head>
  4. <body>
  5. <form>
  6. <select name="cmbTipomachine" onchange="traerBases(this.value)">
  7.                 <option value="0">- Seleccione -</option>
  8.                 <option value="1">Reloj Quarzo</option>
  9.                 <option value="2">Reloj Automático</option>
  10.                 <option value="3">Crono Quarzo</option>
  11.                 <option value="4">Crono Automático</option>
  12.                 <option value="5">Electromecánico</option>
  13.                 <option value="6">Otros</option>
  14.                 </select>
  15. <select name="base" size="4" multiple="MULTIPLE" id="datosBase"></select>
  16. <select name="mecha" size="4" multiple="MULTIPLE" id="datosMecha" >/select>
  17. <select name="caja" size="4" multiple="MULTIPLE" id="datosCaja"></select>
  18. <select name="pulsera" size="4" multiple="MULTIPLE" id="datosPulsera"></select>
  19. </form>
  20. <div id='ajax_indicator' style='visibility: hidden'>Cargando datos...</div>
  21. <body>

Luego el JS en cuestión base_xml.js":
Código Javascript: 
Ver original
  1. var xmlHttp;
  2.  
  3. function traerBases(str) {
  4.  
  5.     if (str == '0' ) {
  6.         document.getElementById('datosBase').options.length = 0;
  7.         return false;
  8.     }
  9.  
  10.     xmlHttp = GetXmlHttpObject();
  11.     
  12.     if (xmlHttp == null) {
  13.         alert("Your browser does not support AJAX!");
  14.         return;
  15.     }
  16.  
  17.     var url = "relqtz_xml.php";
  18.     url = url + "?q=" + str;
  19.     url = url + "&sid=" + Math.random();
  20.  
  21.     xmlHttp.onreadystatechange = stateChanged;
  22.     xmlHttp.open("GET", url, true);
  23.     xmlHttp.send(null);
  24.     
  25.     document.getElementById('ajax_indicator').style.visibility = 'visible';
  26. }
  27.  
  28. function stateChanged() { 
  29.  
  30.     if (xmlHttp.readyState == 4) {
  31.  
  32.         document.getElementById('ajax_indicator').style.visibility = 'hidden';
  33.  
  34.         if (xmlHttp.status != 200) {
  35.             alert('Ocurrio un error! Server: ' + xmlHttp.statusText);
  36.             return false;
  37.         }
  38.  
  39.         // limpiar combo-box
  40.         document.getElementById('datosBase').options.length = 0;
  41.  
  42.         // obtener objeto con estructura del XML
  43.         var xmlDoc = xmlHttp.responseXML.documentElement;
  44.  
  45.         // obtener cantidad total de elementos con etiqueta <comuna>
  46.         var totalElementos = xmlDoc.getElementsByTagName("rquarzo").length;
  47.  
  48.         for (var i = 0; i < totalElementos; i++) {
  49.  
  50.             // obtener elemento comuna posicion i
  51.             var rquarzo             = xmlDoc.getElementsByTagName("rquarzo")[i];
  52.  
  53.             // obtener valores del atributo "id" y del texto
  54.             var idElemento      = rquarzo.attributes.getNamedItem("id").value;
  55.             var textoElemento   = rquarzo.firstChild.nodeValue
  56.  
  57.             // agregar nueva opcion al combo-box
  58.             document.getElementById('datosBase').options.add(new Option(textoElemento, idElemento));
  59.         }
  60.     }
  61. }
  62.  
  63. function GetXmlHttpObject() {
  64.  
  65.     var xmlHttp = null;
  66.  
  67.     try {
  68.         // Firefox, Opera 8.0+, Safari
  69.         xmlHttp = new XMLHttpRequest();
  70.     }
  71.     catch (e) {
  72.         // Internet Explorer
  73.         try {
  74.             xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  75.         }
  76.         catch (e) {
  77.             xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  78.         }
  79.     }
  80.  
  81.     return xmlHttp;
  82. }

Y finalmente el PHP donde hago la consulta a la base de datos donde se encuentra.
Código PHP: 
Ver original
  1. <?php
  2.  
  3. header('Content-Type: text/xml');
  4.  
  5. // sleep(1);
  6.  
  7. if (isset($_GET["q"]) and is_numeric($_GET["q"])) {
  8.  
  9.     $q = $_GET["q"]; 
  10.     include('includes/conexion.php'); 
  11.  
  12.     $sql = ("SELECT id_tareas, tarea FROM tareas_esp
  13.             INNER JOIN tareas_area_trabajo ON tareas_esp.id_tareas = tareas_area_trabajo.tareas_id_tareas
  14.             INNER JOIN area_trabajo ON tareas_area_trabajo.area_trabajo_id_area_trabajo = area_trabajo.id_area_trabajo
  15.             INNER JOIN tipo_maquina_area ON area_trabajo.id_area_trabajo = tipo_maquina_area.id_area
  16.             INNER JOIN tipos_maquinas ON tipo_maquina_area.id_tipo_maquina = tipos_maquinas.id_tipos_maquinas
  17.             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.
  18.  
  19.     $result = mysql_query($sql, $link);
  20.  
  21.     echo '<?xml version="1.0" encoding="ISO-8859-1"?><rquarzos>';
  22.  
  23.     while($row = mysql_fetch_row($result)) {
  24.         echo '<rquarzo id="' . $row[0] . '">' . $row[1] . '</rquarzo>';
  25.     }
  26.  
  27.     echo "</rquarzos>";
  28.  
  29.     mysql_close();
  30.  
  31. }
  32.  
  33. ?>

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.
Última edición por Ojopex2; 27/02/2011 a las 00:07