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

  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.