Last active
August 29, 2015 13:56
-
-
Save oomlaut/8922224 to your computer and use it in GitHub Desktop.
dynamicselect_ui
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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