bssanchez93

Select dependiente - VanillaJS

Apr 2nd, 2016
189
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 3.38 KB | None | 0 0
  1. <!Doctype html>
  2. <html>
  3. <head>
  4.     <body>
  5.         <h1>Prueba selects</h1>
  6.         <!-- Select padre -->
  7.         <div>
  8.             <select name="pais" data-child="sel_hijo" onchange="selectChange(this);">
  9.                 <option value="-1">Selecciona pais</option>
  10.                 <option value="1">Colombia</option>
  11.                 <option value="2">Espa&ntilde;a</option>
  12.                 <option value="3">Argentina</option>
  13.                 <option value="4">Mexico</option>
  14.             </select>
  15.         </div>
  16.  
  17.         <!-- Select hijos -->
  18.         <div>
  19.             <select name="ciudad" class="sel_hijo">
  20.                 <option value="-1" data-parent="-1">Selecciona ciudad/estado/comunidad</option>
  21.                 <option value="1" data-parent="1">Bogota DC</option>
  22.                 <option value="2" data-parent="3">Buenos aires</option>
  23.                 <option value="3" data-parent="2">Barcelona</option>
  24.                 <option value="4" data-parent="1">Floridablanca</option>
  25.                 <option value="5" data-parent="2">Galicia</option>
  26.                 <option value="6" data-parent="3">La plata</option>
  27.                 <option value="7" data-parent="4">Ciudad de mexico</option>
  28.                 <option value="8" data-parent="4">Guadalajara</option>
  29.             </select>
  30.         </div>
  31.         <div>
  32.             <select name="moneda" class="sel_hijo">
  33.                 <option value="-1">Selecciona moneda</option>
  34.                 <option value="1" data-parent="4">Peso colombiano (con Impuesto)</option>
  35.                 <option value="2" data-parent="1">Peso colombiano (sin Impuesto)</option>
  36.                 <option value="3" data-parent="3">Peso argentino (con Impuesto)</option>
  37.                 <option value="4" data-parent="2">Euro (sin Impuesto)</option>
  38.                 <option value="5" data-parent="1">Peso colombiano (con Impuesto)</option>
  39.                 <option value="6" data-parent="2">Euro (con Impuesto)</option>
  40.                 <option value="7" data-parent="4">Peso mexicano (sin Impuesto)</option>
  41.                 <option value="8" data-parent="3">Peso argentino (sin Impuesto)</option>
  42.             </select>
  43.         </div>
  44.  
  45.  
  46.         <script type="text/javascript">
  47.             function selectChange(element) {
  48.                 var sel = element;
  49.                 var selHijo = sel.getAttribute('data-child');
  50.                 var selval = sel.value;
  51.        
  52.                 // Obtener todos los select con la clase que se puso en el atricuto data-child del select "padre"
  53.                 var arrSelectHijos = document.getElementsByClassName(selHijo);
  54.                
  55.                 // Recorre cada select perteneciente a los "hijos", y segun el atributo data-parent del option se compara con
  56.                 // el valor del select "padre" para ver si pertenece al mismo o no, si no pertenece lo deshabilita y oculta
  57.                 for(var k=0; k < arrSelectHijos.length; k++) {
  58.                     var v = arrSelectHijos[k];
  59.  
  60.                     for(var kS = 0; kS < v.options.length; kS++) {
  61.                         var vS = v.options[kS];
  62.  
  63.                         if (vS.getAttribute('data-parent') == selval) {
  64.                             vS.removeAttribute('disabled');
  65.                             vS.style.display = 'block';
  66.                         } else {
  67.                             if (vS.getAttribute('value') == '-1') {
  68.                                 vS.removeAttribute('disabled');
  69.                                 vS.style.display = 'block';
  70.                             } else if (vS.getAttribute('value') == '0') {
  71.                                 vS.removeAttribute('disabled');
  72.                                 vS.style.display = 'block';
  73.                             } else {
  74.                                 if (vS.style.display != 'none') {
  75.                                     vS.removeAttribute('disabled');
  76.                                     vS.style.display = 'none';
  77.                                 }
  78.                             }
  79.                         }
  80.                     }
  81.                 }
  82.             }
  83.         </script>
  84.     <body>
  85. </html>
Advertisement
Add Comment
Please, Sign In to add comment