Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!Doctype html>
- <html>
- <head>
- <body>
- <h1>Prueba selects</h1>
- <!-- Select padre -->
- <div>
- <select name="pais" data-child="sel_hijo" onchange="selectChange(this);">
- <option value="-1">Selecciona pais</option>
- <option value="1">Colombia</option>
- <option value="2">España</option>
- <option value="3">Argentina</option>
- <option value="4">Mexico</option>
- </select>
- </div>
- <!-- Select hijos -->
- <div>
- <select name="ciudad" class="sel_hijo">
- <option value="-1" data-parent="-1">Selecciona ciudad/estado/comunidad</option>
- <option value="1" data-parent="1">Bogota DC</option>
- <option value="2" data-parent="3">Buenos aires</option>
- <option value="3" data-parent="2">Barcelona</option>
- <option value="4" data-parent="1">Floridablanca</option>
- <option value="5" data-parent="2">Galicia</option>
- <option value="6" data-parent="3">La plata</option>
- <option value="7" data-parent="4">Ciudad de mexico</option>
- <option value="8" data-parent="4">Guadalajara</option>
- </select>
- </div>
- <div>
- <select name="moneda" class="sel_hijo">
- <option value="-1">Selecciona moneda</option>
- <option value="1" data-parent="4">Peso colombiano (con Impuesto)</option>
- <option value="2" data-parent="1">Peso colombiano (sin Impuesto)</option>
- <option value="3" data-parent="3">Peso argentino (con Impuesto)</option>
- <option value="4" data-parent="2">Euro (sin Impuesto)</option>
- <option value="5" data-parent="1">Peso colombiano (con Impuesto)</option>
- <option value="6" data-parent="2">Euro (con Impuesto)</option>
- <option value="7" data-parent="4">Peso mexicano (sin Impuesto)</option>
- <option value="8" data-parent="3">Peso argentino (sin Impuesto)</option>
- </select>
- </div>
- <script type="text/javascript">
- function selectChange(element) {
- var sel = element;
- var selHijo = sel.getAttribute('data-child');
- var selval = sel.value;
- // Obtener todos los select con la clase que se puso en el atricuto data-child del select "padre"
- var arrSelectHijos = document.getElementsByClassName(selHijo);
- // Recorre cada select perteneciente a los "hijos", y segun el atributo data-parent del option se compara con
- // el valor del select "padre" para ver si pertenece al mismo o no, si no pertenece lo deshabilita y oculta
- for(var k=0; k < arrSelectHijos.length; k++) {
- var v = arrSelectHijos[k];
- for(var kS = 0; kS < v.options.length; kS++) {
- var vS = v.options[kS];
- if (vS.getAttribute('data-parent') == selval) {
- vS.removeAttribute('disabled');
- vS.style.display = 'block';
- } else {
- if (vS.getAttribute('value') == '-1') {
- vS.removeAttribute('disabled');
- vS.style.display = 'block';
- } else if (vS.getAttribute('value') == '0') {
- vS.removeAttribute('disabled');
- vS.style.display = 'block';
- } else {
- if (vS.style.display != 'none') {
- vS.removeAttribute('disabled');
- vS.style.display = 'none';
- }
- }
- }
- }
- }
- }
- </script>
- <body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment