Skip to content

Instantly share code, notes, and snippets.

@bssanchez

bssanchez/dependent-select.html

Last active September 26, 2017 18:51
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bssanchez/1a6e00e5e96b53794eb684ccbcd85005 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bssanchez/1a6e00e5e96b53794eb684ccbcd85005 to your computer and use it in GitHub Desktop.
Download ZIP
Dependent form select in vanilla javascript
Raw
dependent-select.html
<!Doctype html>
<html>
<head>
<title>Selects dependientes</title>
<meta charset="utf-8">
</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&ntilde;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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment