Antes que todo. ¿Hay algo que pueda hacer esto? (es lo que necesito hacer):
Estoy trabajando en PHP y MYSQL
1. tengo un combo con tipos de relojes
2 tengo 4 combos multiselección donde cada uno es un area de trabajo con sus respectivas tareas
3. al seleccionar un elemento del combo padre(por ejemplo "reloj de quarzo", aparezcan en los selecciones multiples como si fuera uno solo, es decir serian todas las tareas para reloj de quarzo divididas en los grupos 1, 2, 3 y 4
¿Me explico bien?
Ahora, lo que más se asemeja a esto que necesito son los combos anidados en 2 niveles, tales como País-Ciudad que al seleccionar un pais despliega las ciudades, pero con la diferencia en que sea 1 combo a 1 combo yo necesito que sea 1 combo a 4 combos (o select multiple).
Entonces, encontré un script de combos anidados, al que pretendo adaptar para mi función. Pero la verdad no he llegado a puerto alguno.
El script está compuesto por 3 partes, la parte html, donde se encuentra el <form>, la parte php y xml donde se encuentran los querys a la base de datos y el echo a las etiquetas xml y finalmente la parte de JS_xml donde se establecen las funciones.
He estado intentando adaptarlo de la siguiente forma. Este es el código del original de 1-1 combos que utilicé, de Regiones que trae comunas:
[url=https://gist.github.com/836535][/url] (espero que se pueda ver sin problemas)
entonces:
Lo llamo la función desde el form desde acá:
Código HTML :
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="js/tareas_xml.js"></script> </head> <body> <form action=""> <select name="cmbTipomachine" onchange="traerTareas(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> </html>
Luego en el archivo tareas_xml.js que he modificado donde había una sola llamada a una sola variable, he todo hecho x 4, es decir por la cantidad de combos receptores que tengo, adaptación que no estoy seguro de haberla hecho correctamente
El código:
Código Javascript :
var xmlHttp;
function traerTareas(str) {
if (str == '0' ) {
document.getElementById('datosBase').options.length = 0;
return false;
document.getElementById('datosMecha').options.length = 0;
return false;
document.getElementById('datosCaja').options.length = 0;
return false;
document.getElementById('datosPulsera').options.length = 0;
return false;
}
xmlHttp = GetXmlHttpObject();
if (xmlHttp == null) {
alert("Su navegador no soporta AJAX!");
return;
}
var url = "tareas_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 <tipo1>
var totalElementos = xmlDoc.getElementsByTagName("tipo1").length;
for (var i = 0; i < totalElementos; i++) {
// obtener elemento tipo1 posicion i
var tipo1 = xmlDoc.getElementsByTagName("tipo1")[i];
// obtener valores del atributo "id" y del texto
var idElemento = tipo1.attributes.getNamedItem("id").value;
var textoElemento = tipo1.firstChild.nodeValue
// agregar nueva opcion al combo-box
document.getElementById('datosBase').options.add(new Option(textoElemento, idElemento));
}
// limpiar combo-box
document.getElementById('datosMecha').options.length = 0;
// obtener objeto con estructura del XML
var xmlDoc = xmlHttp.responseXML.documentElement;
// obtener cantidad total de elementos con etiqueta <tipo2>
var totalElementos = xmlDoc.getElementsByTagName("tipo2").length;
for (var i = 0; i < totalElementos; i++) {
// obtener elemento tipo2 posicion i
var tipo2 = xmlDoc.getElementsByTagName("tipo2")[i];
// obtener valores del atributo "id" y del texto
var idElemento = tipo2.attributes.getNamedItem("id").value;
var textoElemento = tipo2.firstChild.nodeValue
// agregar nueva opcion al combo-box
document.getElementById('datosMecha').options.add(new Option(textoElemento, idElemento));
}
// limpiar combo-box
document.getElementById('datosCaja').options.length = 0;
// obtener objeto con estructura del XML
var xmlDoc = xmlHttp.responseXML.documentElement;
// obtener cantidad total de elementos con etiqueta <tipo3>
var totalElementos = xmlDoc.getElementsByTagName("tipo3").length;
for (var i = 0; i < totalElementos; i++) {
// obtener elemento tipo3 posicion i
var tipo3 = xmlDoc.getElementsByTagName("tipo3")[i];
// obtener valores del atributo "id" y del texto
var idElemento = tipo3.attributes.getNamedItem("id").value;
var textoElemento = tipo3.firstChild.nodeValue
// agregar nueva opcion al combo-box
document.getElementById('datosCaja').options.add(new Option(textoElemento, idElemento));
}
// limpiar combo-box
document.getElementById('datosPulsera').options.length = 0;
// obtener objeto con estructura del XML
var xmlDoc = xmlHttp.responseXML.documentElement;
// obtener cantidad total de elementos con etiqueta <tipo4>
var totalElementos = xmlDoc.getElementsByTagName("tipo4").length;
for (var i = 0; i < totalElementos; i++) {
// obtener elemento tipo4 posicion i
var tipo4 = xmlDoc.getElementsByTagName("tipo4")[i];
// obtener valores del atributo "id" y del texto
var idElemento = tipo4.attributes.getNamedItem("id").value;
var textoElemento = tipo4.firstChild.nodeValue
// agregar nueva opcion al combo-box
document.getElementById('datosPulsera').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 archivo tareas_xml.php en el que están los querys y su ubicación mediante echo de las etiquetas xml en como <option> en el <select>.
Las sentencias sql están correctas, (Puede confundir un poco pero son una ensalada de tablas).
Primero la estructura de las tablas
Ahora el código PHP
Código PHP :
<?php
header('Content-Type: text/xml');
if (isset($_GET["q"]) and is_numeric($_GET["q"])) {
$q = $_GET["q"];
include('includes/conexion.php');
$sql1 = ("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 ");
$result = mysql_query($sql1);
echo '<?xml version="1.0" encoding="ISO-8859-1"?><tipos1>';
while($row = mysql_fetch_row($result)) {
echo '<tipo1 id="' . $row[0] . '">' . $row[1] . '</tipo1>';
}
echo "</tipos1>";
// otro combo
$sql2 = ("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 = 2 ");
$result = mysql_query($sql2);
echo '<tipos2>';
while($row = mysql_fetch_row($result)) {
echo '<tipo2 id="' . $row[0] . '">' . $row[1] . '</tipo2>';
}
echo "</tipos2>";
//otro combo
$sql3 = ("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 = 3 ");
$result = mysql_query($sql3);
echo '<tipos3>';
while($row = mysql_fetch_row($result)) {
echo '<tipo3 id="' . $row[0] . '">' . $row[1] . '</tipo3>';
}
echo "</tipos3>";
//otrocombo
$sql4 = ("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 = 4 ");
$result = mysql_query($sql4);
echo '<tipos4>';
while($row = mysql_fetch_row($result)) {
echo '<tipo4 id="' . $row[0] . '">' . $row[1] . '</tipo4>';
}
echo "</tipos4>";
}
?>
Lo que me gustaría es que me dieran una pista, de cómo debería hacer la adaptación del código original (link al inicio) a lo que necesito hacer.
No tengo mucha idea de JavaScript, lo he hecho todo "al ojo" así que si alguien sabe de un mejor método o forma de adaptarlo, será bien recibida.
Eso, gracias de antemano, espero que se haya entendido.
Saludos.
