Skip to content

Instantly share code, notes, and snippets.

@oomlaut

oomlaut/dynamicselect.html

Last active August 29, 2015 13:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save oomlaut/8922224 to your computer and use it in GitHub Desktop.
Save oomlaut/8922224 to your computer and use it in GitHub Desktop.
Download ZIP
dynamicselect_ui
Raw
dynamicselect.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="dynamicselect.js"></script>
</head>
<body>
<h1>Ross Medical Group</h1>
<form action="#" method="get">
<!-- REMEMBER TO REMOVE INLINE STYLES AND RESTYLE WITH CSS -->
<p><label for="dd1">Independent choice</label><select id="dd1" name="independent" style="display:block; width:250px"></select></p>
<p><label for="dd2">Dependent choice</label><select id="dd2" name="dependent" style="display:block; width:250px"></select></p>
</form>
</body>
</html>
Raw
dynamicselect.js
jQuery(function(){
//select ID of independent dropdown list
var $idl = $('#dd1');
//define default text for independent field
var defaultTextInd = "Select One";
//select ID of dependent dropdown list
var $ddl = $('#dd2');
//define default text for dependent field
var defaultTextDep = "Please Choose __ first";
//define dynamic values
var dynamicDropDown = {
menuOptions: {
"choice 1": {
"optval1": "1: Field Value1",
"optval2": "1: Field Value2",
"optval3": "1: Field Value3"
},
"choice 2": {
"optval1": "2: Value1",
"optval2": "2: Value2",
"optval3": "2: Value3",
"optval4": "2: Value4",
"optval5": "2: Value5"
},
"choice 3": {
"optval1": "3: Value1",
"optval2": "3: Value2",
"optval3": "3: Value3",
"optval4": "3: Value4"
}
},
idl: $('#dd1'),
ddl: $('#dd2'),
init: function(){
}
}
//populate independent drop-down with default value
$idl.append('<option value="default" selected="selected">' + defaultTextInd + '</option>').change(function(){
var currentVal = $(this).val();
if (currentVal == 'default') {
$ddl.html('<option value="default" selected="selected">' + defaultTextDep + '</option>');
}
else {
$ddl.html('<option value="default" selected="selected">Choose One:</option>');
$.each(dynamicDropDown[currentVal], function(strIndex, strValue){
$ddl.append('<option value="' + strIndex + '">' + strValue + '</option>');
});
}
});
//populate independent drop-down with initial values
$.each(dynamicDropDown, function(strIndex, objValue){
$idl.append('<option value="' + strIndex + '">' + strIndex + '</option>')
});
//populate dependent drop-down with default value
$ddl.append('<option value="default" selected="selected">' + defaultTextDep + '</option>');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment