advanced code snippet search

Posted By

xoxolatito on 01/05/10


Tagged

combo box


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

jlan


Combos dependientes de resultados anteriores by xOxo

 / Published in: PHP
 

URL: http://xoxonizer.com/combos_dependientes/

combos dependientes

Expand | Embed | Plain Text 
  1. == HTML + jQuery== 
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <title>Combos dependientes del resultado anterior by xOxo</title>
  8. <script language="javascript" src="js/jquery-1.3.2.js"></script>
  9. <script language="javascript">
  10. $(document).ready(function(){
  11. 	// Parametros para e combo1
  12.    $("#paso2").css('display', 'none');
  13.    $("#paso3").css('display', 'none');
  14.    $("#paso4").css('display', 'none');
  15.    $("#combo1").change(function () {
  16.    		$("#combo1 option:selected").each(function () {
  17. 				seleccionado=$(this).val();
  18. 				$.post("prueba.php?mod=vehiculo", { seleccionado: seleccionado }, function(data){
  19. 				$("#combo2").html(data);
  20. 				$("#paso2").css('display', '');
  21. 				$("#combo3").html("");
  22. 			});			
  23.         });
  24.    })
  25. 	// Parametros para el combo2
  26. 	$("#combo2").change(function () {
  27.    		$("#combo2 option:selected").each(function () {
  28. 				seleccionado=$(this).val();
  29. 				$.post("prueba.php?mod=marca", { seleccionado: seleccionado }, function(data){
  30. 				$("#paso3").css('display', '');
  31. 				$("#paso4").css('display', '');
  32. 				$("#combo3").html(data);
  33. 			});			
  34.         });
  35.    })
  36. });
  37. function grabar () {
  38. 	combo1 = document.getElementById('combo1').value;
  39. 	combo2 = document.getElementById('combo2').value;
  40. 	combo3 = document.getElementById('combo3').value;
  41. 	alert("El resultado es:\n\n" + combo1 + "\n" + combo2 + "\n" + combo3 + "\n\nEjemplo by xOxo");
  42. }
  43. </script>
  44. <link href="style.css" rel="stylesheet" type="text/css" />
  45. </head>
  46. <body>
  47. <form action="/agregar-a-basededatos/" method="post" onsubmit="grabar(); return false;">
  48. <div class="ejemplo">
  49.     <ul>
  50.         <li>Tipo de vehiculo:</li>
  51.         <li><select name="combo1" id="combo1">	
  52.                 <option value="x">Seleccione</option>
  53.                 <option value="auto">Auto</option>
  54.                 <option value="pickup">Pick up</option>
  55.                 <option value="312toneladas">3 1/2 toneladas</option>    
  56. 	        </select>
  57.         </li>
  58.     </ul>
  59.     <ul id="paso2">
  60.         <li>Marca:</li>
  61.         <li><select name="combo2" id="combo2">	
  62. 			</select>
  63.         </li>
  64.     </ul>
  65.     <ul id="paso3">
  66.         <li>Modelo:</li>
  67.         <li><select name="combo3" id="combo3">
  68. 			</select>
  69.         </li>
  70.     </ul>
  71.     <ul id="paso4">
  72.         <li></li>
  73.         <li>
  74.         	<input type="submit" value="Grabar" />
  75.         </li>
  76.     </ul>
  77. </div>
  78. </form>
  79. </body>
  80. </html>
  81.  
  82. == CSS ==
  83.  
  84. @charset "utf-8";
  85.  
  86. .ejemplo{
  87. font-family:Verdana, Arial, Helvetica, sans-serif;
  88. font-size:11px;
  89. font-weight:bold;
  90. width: 100%;
  91. }
  92.  
  93. .ejemplo ul{
  94. padding: 6px 0 7px 0; 
  95. margin: 0;
  96. text-align: left; 
  97. }
  98.  
  99. .ejemplo ul li{
  100. display: inline;
  101. }
  102.  
  103. .ejemplo ul li a{
  104. color: #494949;
  105. padding: 6px 3px 4px 3px;
  106. margin-right: 20px;
  107. text-decoration: none;
  108. border-bottom: 3px solid gray;
  109. }
  110.  
  111. .ejemplo ul li a:hover, .ejemplo ul li a.selected{
  112. border-bottom-color: black;
  113. }
  114.  
  115. == PHP (CONTROLADOR) ==
  116.  
  117. <?php
  118.  
  119. include 'classes/query.php';
  120. $consultas = new consultas();
  121.  
  122. if ($_GET['mod'] == 'vehiculo') {
  123. 	echo $consultas->vehicles($_POST["seleccionado"]);
  124. }
  125. if ($_GET['mod'] == 'marca') {
  126. 	echo $consultas->marca($_POST["seleccionado"]);
  127. }
  128.  
  129. ?>
  130.  
  131. == PHP (MODELO) ==
  132.  
  133. <?php
  134.  
  135. class consultas {
  136.  
  137. 	private function options_values ($array) {
  138.  
  139. 		$output = "<option value=''>Seleccione</option>";
  140. 		if (is_array($array)) {
  141. 			for ($i = 0; $i<sizeof($array); $i++) {
  142. 				$output .='<option value="' . $array[$i] . '">' . $array[$i] . '</option>';
  143. 			}
  144. 		} else {
  145. 			$output .='<option value="">-------</option>';
  146. 		}
  147.  
  148. 		return $output;
  149. 	}
  150.  
  151. 	public function vehicles ($param) {
  152.  
  153. 		// query de autos o algun otro veh�­culo
  154. 		// asi quedaria el output
  155. 		if ($param == 'auto') {
  156. 			$names = array("Astra","Chevy","Pointer","Tsuru");
  157. 		} elseif ($param == 'pickup') {
  158. 			$names = array("Jeep","Titan","Cayenne","Lobo");
  159. 		} elseif ($param == '312toneladas') {
  160. 			$names = array("Maxtor","Titanx3","Kenwood");
  161. 		}
  162.  
  163. 		return $this->options_values($names);
  164. 	}
  165.  
  166. 	public function marca ($param) {
  167.  
  168. 		// query de marcas
  169. 		// asi quedaria el output
  170. 		if ($param == 'Astra') {
  171. 			$names = array("2005","2006","2007","2008");
  172. 		} elseif ($param == 'Chevy') {
  173. 			$names = array("1999","2000","2001","2002");
  174. 		} elseif ($param == 'Pointer') {
  175. 			$names = array("2004","2005","2006");
  176. 		}
  177.  
  178. 		return $this->options_values($names);
  179. 	}
  180.  
  181. }
  182.  
  183. ?>

Report this snippet  

You need to login to post a comment.