Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » combos en 4 niveles

JavaScript - combos en 4 niveles

Volver
Nuevo Tema
<<>>
 
Vista:

combos en 4 niveles

Publicado por Mara (2 intervenciones) el 11/07/2015 20:08:02
Hola a tod@s, el asunto que me trae ahora por estos lares es el siguiente:
Tengo uno codigo de programa que me genera los selects dependientes como los preciso.. pero el caso es que requiero pasar los valores tomados en la primera pagina a otra (s) pagina(s).
Sin mas preambulo aca esta el codigo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
</style>
	<script type="text/javascript">
 
		$(document).ready(function(){
			$("#departamento").attr("disabled",true);
			$("#municipio").attr("disabled",true);
			$("#institucion").attr("disabled",true);
 
			dependencia_sector(); $("#sector").change(function() {
			$("#departamento").attr("disabled",false);
			cargar_departamento(); $("#sector").attr("disabled",true); });
			$("#departamento").change(function() {
			dependencia_municipio(); $("#departamento").attr("disabled",true); });
			$("#municipio").change(function() {
			dependencia_institucion(); $("#municipio").attr("disabled",true);
			$("#institucion").attr("disabled",true);});
       	});
		function dependencia_sector()
		{
			$.get("scripts/scripts/dependencia-sector.php?", function(resultado){
			var sector = $("#sector").val();
				if(resultado == false)
				{
					alert("Error");
				}
				else
				{
					$("#sector").attr("disabled",false);
					document.getElementById("sector").options.length=1;
					$('#sector').append(resultado);
				}
			});
		}
		function cargar_departamento()
		{
			$.get("scripts/scripts/cargar-departamento.php", function(resultado){
			var departamento = $("#departamento").val();
				if(resultado == false)
				{
					alert("Error");
				}
				else
				{
					$("#departamento").attr("disabled",false);
					document.getElementById("departamento").options.length=1;
					$('#departamento').append(resultado);
				}
			});
		}
		function dependencia_municipio()
		{
			var code = $("#departamento").val();
			$.get("scripts/scripts/dependencia-municipios.php", { code }, function(resultado){
				if(resultado == false)
				{
					alert("Error");
				}
				else
				{
					$("#municipio").attr("disabled",false);
					document.getElementById("municipio").options.length=1;
					$('#municipio').append(resultado);
				}
			});
		}
		function dependencia_institucion()
		{
			var code1 = $("#municipio").val();
			$.get("scripts/scripts/dependencia-instituciones.php?", { code: code1 }, function(resultado){
					if(resultado == false)
					{
						alert("Error");
					}
					else
					{
						$("#institucion").attr("disabled",false);
						document.getElementById("institucion").options.length=1;
						$('#institucion').append(resultado);
					}
				});
		}
	var sector = document.querySelector("#sector p:firstchild");
	var departamento = document.querySelector("#departamento p:firstchild");
	var municipio = document.querySelector("#municipio p:firstchild");
	var institucion = document.querySelector("#institucion p:firstchild");
function reset()
		{
			$("#institucion").attr("disabled",true);
			$("#institucion").val("");
			$("#municipio").val("");
			$("#departamento").val("");
			$("#sector").val("");
			$("#municipio").attr("disabled",true);
			$("#departamento").attr("disabled",true);
			$("#sector").attr("disabled",false);
		}
	</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Datos</title>
 
</head>
<body>
   <center>
 
<!--- aca inicia prueba --->
<h2>&nbsp;&nbsp; Ingreso al Sistema</h2>
<form id="form1" name="form1" method="POST" action="parametros.php">
 
  <table width="100%" border="0" align="center" class="down1">
 
 <tbody>
 
    <tr>
	<fieldset>DATOS DE SELECCION
      <td colspan="4"><div align="left"><font color="#000000" size="3" face="Geneva, Arial, Helvetica, sans-serif"><strong>DATOS DE SELECCION</strong></font></div></td>
    </fieldset>
	</tr>
	 <tr>
      <td><font color="#000099" size="3" face="Geneva, Arial, Helvetica, sans-serif">Sector: </font></td>
      <td colspan="1">
	    <font color="#000099" size="2" face="Geneva, Arial, Helvetica, sans-serif">
         <label>
          <select name="sector" id="sector">
				<option value="0">Selecciona una...</option>
		  </select>
         </label>
        </font>
	  </td>
      <td><font color="#000099" size="3" face="Geneva, Arial, Helvetica, sans-serif">Departamento: </font></td>
      <td>
	  <font color="#000099" size="2" face="Geneva, Arial, Helvetica, sans-serif">
        <label>
          <select name="departamento" id="departamento">
				<option value="0">Selecciona una...</option>
		  </select>
        </label>
      </font>
	  </td>
	  <td><font color="#000099" size="3" face="Geneva, Arial, Helvetica, sans-serif">Municipio: </font></td>
      <td colspan="1">
	    <font color="#000099" size="2" face="Geneva, Arial, Helvetica, sans-serif">
         <label>
          <select name="municipio" id="municipio">
				<option value="0">Selecciona una...</option>
		  </select>
         </label>
        </font>
	  </td>
   </tr>
   <tr>
      <td><div align="right"><font color="#000099" size="3" face="Geneva, Arial, Helvetica, sans-serif">Institucion: </font></div></td>
      <td colspan="6"><font color="#000099" size="2" face="Geneva, Arial, Helvetica, sans-serif">
        <label>
          <select name="institucion" id="institucion">
				<option value="0">Selecciona una...</option>
		  </select>
          </label>
        </font></td>
   </tr>
  <tr>
    <td colspan="5" align="left"><div align="CENTER">
	  <input type="submit" class="boot" name="guarda" value="GUARDAR" align="left"/>
	  <input type="submit" class="boot" name="nuevo" value="NUEVO" align="left"/>
	  <input type="submit" class="boot" name="ingresar" value="INGRESAR" align="left"/>
	  </div>
	</td>
  </tr>
  </tbody></table>
</form>  </center>
</html>

Esta es la clase combos

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<?php
 
class selects extends MySQL
{
	var $code = "";
 
	function cargardepartamento()
	{
		$consulta = parent::consulta("SELECT departamento,com_id FROM localidad ORDER BY departamento ASC");
		$num_total_registros = parent::num_rows($consulta);
		if($num_total_registros>0)
		{
			$departamentos = array();
			while($departamento = parent::fetch_assoc($consulta))
			{
				$code = $departamento["com_id"];
				$name = $departamento["departamento"];
				$departamentos[$code]=$name;
			}
			return $departamentos;
		}
		else
		{
			return false;
		}
	}
	function cargarmunicipios()
	{
		$consulta = parent::consulta("SELECT municipio,prov_id FROM localidad WHERE com_id = '".$this->code."' ORDER BY municipio ASC ");
		$num_total_registros = parent::num_rows($consulta);
		if($num_total_registros>0)
		{
			$municipios = array();
			while($municipio = parent::fetch_assoc($consulta))
			{
				$code = $municipio["prov_id"];
				$name = $municipio["municipio"];
				$municipios[$code]=$name;
			}
			return $municipios;
		}
		else
		{
			return false;
		}
	}
	function cargarinstituciones()
	{
		$consulta = parent::consulta("SELECT nombre,loc_id FROM localidad WHERE prov_id = '".$this->code."'");
		$num_total_registros = parent::num_rows($consulta);
		if($num_total_registros>0)
		{
			$instituciones = array();
			while($institucion = parent::fetch_assoc($consulta))
			{
				$code = $institucion["loc_id"];
				$name = $institucion["nombre"];
				$instituciones[$code]=$name;
			}
			return $instituciones;
		}
		else
		{
			return false;
		}
	}
	function cargarSector()
	{
		$consulta = parent::consulta("SELECT sector,sect_id FROM localidad");
		$num_total_registros = parent::num_rows($consulta);
		if($num_total_registros>0)
		{
			$sectores = array();
			while($sector = parent::fetch_assoc($consulta))
			{
				$code = $sector["sect_id"];
				$name = $sector["sector"];
				$sectores[$code]=$name;
			}
			return $sectores;
		}
		else
		{
			return false;
		}
	}
 
}
?>

Estos son los archivos que seleccionan de la base los elementos.

1
2
3
4
5
6
7
8
9
10
11
<?php
include("../clases/class.mysql.php");
include("../clases/class.combos.php");
$sectores = new selects();
$sectores->code = $_GET["code"];
$sectores = $sectores->cargarSector();
foreach($sectores as $key=>$value)
{
		echo "<option value=\"$key\">$value</option>";
}
?>
1
2
3
4
5
6
7
8
9
10
<?php
include("../clases/class.mysql.php");
include("../clases/class.combos.php");
$selects = new selects();
$departamentos = $selects->cargardepartamento();
foreach($departamentos as $key=>$value)
{
  echo "<option value=\"$key\">$value</option>";
}
?>
1
2
3
4
5
6
7
8
9
10
11
<?php
include("../clases/class.mysql.php");
include("../clases/class.combos.php");
$municipios = new selects();
$municipios->code = $_GET["code"];
$municipios = $municipios->cargarmunicipios();
foreach($municipios as $key=>$value)
{
		echo "<option value=\"$key\">$value</option>";
}
?>

1
2
3
4
5
6
7
8
9
10
11
<?php
include("../clases/class.mysql.php");
include("../clases/class.combos.php");
$instituciones = new selects();
$instituciones->code = $_GET["code"];
$instituciones = $instituciones->cargarinstituciones();
foreach($instituciones as $key=>$value)
{
		echo "<option value=\"$key\" font size='2' >$value</option>";
}
?>

No se si con estos datos me puedan colaborar para realizar lo que requiero que es: obtener el dato seleccionado y trabajarlo en otra pagina.. en verdad lo he intentado pero no me sale lo que requiero.. lo maximo que he logrado es traer o trabajar solo con el ultimo dato.. pero necesito es todos los datos..
por su colaboracion.. Mil Gracias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Vainas
Val: 95
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

combos en 4 niveles

Publicado por Vainas (258 intervenciones) el 13/07/2015 21:52:32
Buenas:

Veo que lo tienes todo organizado eso esta bien. He dejado ya este enlace varias veces por el foro, creo que es el mejor ejemplo que he encontrado en español de momento sobre ajax: http://www.anieto2k.com/2008/05/27/combos-dependientes-accesibles-php-jquery/

Fijate que la parte del servidor ya la tienes hecha o eso me parece, lo unico que tendrias que organizarla para que sea un xml o un json (por mantener un poco el standar). El tema es que en vez de enviar al cliente solo:

1
2
3
4
<option value=\"$key\" font size='2' >$value</option>
<option value=\"$key\" font size='2' >$value</option>
...
<option value=\"$key\" font size='2' >$value</option>


le envies un

1
2
3
4
5
6
<select>
<option value=\"$key\" font size='2' >$value</option>
<option value=\"$key\" font size='2' >$value</option>
...
<option value=\"$key\" font size='2' >$value</option>
</select>

y que mantenga un poco la estructura de archivo xml. La vuelta de estos datos solo queda meterlos dentro de cada select que tienes en tu pagina actual con funciones en jquery como append (antes fijate que vacia el select con empty());

Espero que esto ayude. Si eso puedes volver a preguntar si tienes alguna duda.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

combos en 4 niveles

Publicado por mara (2 intervenciones) el 14/07/2015 02:32:22
Hola gracias por tu respuesta, te comento que he verificado tu link, y la verdad es interesante, pero como ves estos combos los estoy rellendo desde una DB, y pues por ende no me sirve o no caso la forma de incorporarlo en mi proyecto, por demas he verificado lo que me indicas pero no logro entender donde tomo los valores que ha seleccionado el usuario..
No se si soy claro con esto.. me puedes colaborar por favor..
Posdata: te agradeceria lo antes posible ya que la verdad estoy algo apurada..
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas
Val: 95
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

combos en 4 niveles

Publicado por Vainas (258 intervenciones) el 15/07/2015 10:02:17
Buenas de nuevo:

Tu tienes esto en tu html:

1
2
3
<select name="municipio" id="municipio">
				<option value="0">Selecciona una...</option>
		  </select>

Tendras que poner un javascript/jquery algo asi:

1
2
3
4
5
6
7
$("#municipio").bind("change", function() {
    $.get("institucion.php", {code: $(this).val(), type: "xml"}, function(xml){
      $("#institucion").empty();
      .....
       });
    }, "xml");
});

uso bind.("change"....) ya que esto va a enlazar el codigo siguiente (el function) al evento onchange del select, es decir que cada vez que se intente seleccionar algo en tu select se va a lanzar este codigo que es una llamada ajax a un php que va a rellenar el siguiente select "no el actual, el siguiente". Ten encuenta con esto que para que el primer select se rellene hay que hacerlo cuando se cargue la web de forma tradicional con php, o bien, llamando al ajax al inicio de la web o como ultima opcion haciendo click a algun boton.

asi que el primer select queda algo asi (donde tengas tu $(document).ready(....:

1
2
3
4
5
6
7
$(document).ready(function(){
//... antes o despues de tus codigo de momento puede dar igual creo...

$.get("sector.php", {type: "xml"}, function(xml){
      $("#sector").empty();
      .....
       });
    }, "xml");

Los siguientes quedan mas o menos como el primer ejemplo. tendras que cambiar tus llamadas a los php correspondientes y seleccionar el siguiente select (me refiero a seleccionarlo con jquery de esta forma $(#id_del_siguiente_select)...)e ir rellenarlo con los nuevos datos.

Por el codigo que veo ya tienes los php que van a desvolver los correspondientes selects, solo tendras que decir que se imprima tambien la etiqueta <select> y su correspondiente cierre para que sea un xml valido (por poner un ejemplo):

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
include("../clases/class.mysql.php");
include("../clases/class.combos.php");
$municipios = new selects();
$municipios->code = $_GET["code"];
$municipios = $municipios->cargarmunicipios();
echo "<select>";
foreach($municipios as $key=>$value)
{
		echo "<option value=\"$key\">$value</option>";
}
echo "</select>";
?>

Con algun retoque mas yo creo que lo podrias poner en funcionamiento.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar