Last active
December 30, 2015 20:19
-
-
Save LongLiveCHIEF/7880119 to your computer and use it in GitHub Desktop.
dynamic select boxes
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
| <head> | |
| <script src="jquery.js"></script><!-- use .js for easier DOM manipulation, can be done without, using the native DOM api --> | |
| <script src="selection-map.js"></script> | |
| </head> | |
| <body> | |
| <!-- select name="" values will be used inside the map object to initialize watch --> | |
| <!-- the custom data-selmap-cascade="" property initializes the dynamic functionality, and the value should be an | |
| -- string array format, where the values are the names of the select field whose options will depend on this | |
| -- elements selected option | |
| --> | |
| <select data-selmap-cascade="['secondselect','fourthselect']" name="firstselect"> | |
| <option data-selmap-set-cascade="['second-select : set2', 'fourth-select : set1']" value="0" selected="selected">Choose...</option> | |
| <!-- list other options here, using the data-selmap-showselectfields settings for each dependent select field --> | |
| </select> | |
| <select class="selmap" name="secondselect"> | |
| <!-- will be created via selection-map.js --> | |
| </select> | |
| </body> |
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
| // first we map our dependencies | |
| var map = { | |
| secondselect: [ //high level keys are the fields that will cause cascades | |
| 'set1' : {[new SelectOption('','','')],[new SelectOption('','','')],[new SelectOption('','','')]} // this is an option list, with gets a name as a key | |
| 'set2' : {[new SelectOption('','','')],[new SelectOption('','','')],[new SelectOption('','','')]}, | |
| 'set3' : {[new SelectOption('','','')],[new SelectOption('','','')],[new SelectOption('','','')]}, | |
| ], | |
| fourthselect: [ | |
| 'set1' : {[new SelectOption('','','')],[new SelectOption('','','')],[new SelectOption('','','')]} | |
| ] | |
| }; | |
| // now we make it easy to inject select options at any point | |
| var SelectOption = function(text, value, dependenSelectFields){ | |
| return {}; //retun object with properties corresponding to the attributes and values of a specific option | |
| } | |
| //and now we kick off processing | |
| var $primaryElements = $.data('selmap-cascade'); // create a collection consisting of any and all elements with selmap-cascade data option | |
| //here we act when any designated dependent field has a selection change | |
| $primaryelements.select(function(){ | |
| var mapkey = $(this + ':selected').data('selmap-set-cascade'); // get the data that will allow us to grab the proper select options for the dependent elements | |
| //and now we render the correct option into the correct place in the DOM | |
| }); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment