Skip to content

Instantly share code, notes, and snippets.

@redknitin
Created November 1, 2017 12:39
Show Gist options
  • Save redknitin/276198997b9b7d59013a9024c7037219 to your computer and use it in GitHub Desktop.
Save redknitin/276198997b9b7d59013a9024c7037219 to your computer and use it in GitHub Desktop.
Cascading dropdowns in HTML-JS with static data
<!--
Name: Cascading Dropdowns for Static Data
Description: Provide a dictionary object using JSON and the pair of dropdowns to link together
Author: Nitin
-->
<!doctype html><html><head>
<script>
function ddlpopulate(ddl, arr) {
ddl.options.length = 0;
iteropt = document.createElement('option');
iteropt.innerHTML = iteropt.value = '';
ddl.appendChild(iteropt);
for (i=0; i<arr.length; i++) {
iteropt = document.createElement('option');
iteropt.innerHTML = iteropt.value = arr[i]; //.text
ddl.appendChild(iteropt);
}
}
function ddlcascade(upper, lower, ht) {
objUpper = document.getElementById(upper);
objLower = document.getElementById(lower);
if (objUpper.options.length == 0) {
ddlpopulate(objUpper, Object.keys(ht));
}
objUpper.onchange = function() {
ddlpopulate(objLower, ht[objUpper.value]);
}
}
//If using jQuery, use $(document).ready, or find and call other onload handlers
window.onload = function() {
hyper01 = { 'nose' : ['N-X', 'N-L', 'N-M', 'N-S'], 'lips' : ['L-STD'], 'ear': ['E-L', 'E-S'] };
ddlcascade('ddl01', 'ddl02', hyper01);
}
</script>
</head><body>
<form>
<select id="ddl01">
</select>
<select id="ddl02">
</select>
</form>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment