├── .gitignore ├── CHANGELOG.md ├── Cakefile ├── LICENSE ├── README.md ├── jquery.dependent-selects.coffee └── jquery.dependent-selects.js /.gitignore: -------------------------------------------------------------------------------- 1 | index.html 2 | style.css 3 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # jQuery Dependent Selects Change Log 2 | 3 | ## Version 1.2.1 4 | 5 | - Fixes a display bug with placeholder selects and labels not displaying at the correct times 6 | 7 | ## Version 1.2.0 8 | 9 | - Allow placeholder selects for sub levels through a passed array of strings 10 | - Allow placeholder selects to be set through a data attribute on the select 11 | 12 | ## Version 1.1.0 13 | 14 | - Allow labels to be created for sub selects through a passed array of strings 15 | - Allow labels to be created from a data attribute on the select 16 | 17 | ## Version 1.0.4 18 | 19 | - Placeholder option now accepts an array of strings to be used at different levels 20 | 21 | ## Version 1.0.3 22 | 23 | - Fixes a bug where select name values were getting removed from all selects on the page 24 | - Fixes submission of automatically retained values (related to other bug ^) 25 | 26 | ## Version 1.0.2 27 | 28 | - Fixes a selected retention bug if the selected item was the first in a group or sub-group 29 | 30 | ## Version 1.0.1 31 | 32 | - Retains selected option upon instantiation (including correct nesting) 33 | -------------------------------------------------------------------------------- /Cakefile: -------------------------------------------------------------------------------- 1 | fs = require 'fs' 2 | {spawn, exec} = require 'child_process' 3 | 4 | js_file_name = 'jquery.dependent-selects.js' 5 | coffee_file_name = 'jquery.dependent-selects.coffee' 6 | 7 | compileJS = (options = {}) -> 8 | console.log "Compiling #{coffee_file_name}..." 9 | exec "coffee --compile --bare #{coffee_file_name}", (err) -> 10 | if err? 11 | console.log 'Error :', err 12 | 13 | task 'build', 'Build things', -> 14 | compileJS() 15 | 16 | task 'watch', 'Watch things', -> 17 | compileJS() 18 | fs.watch coffee_file_name, -> 19 | compileJS() 20 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2012 Mark J Smith, Simpleweb 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject 9 | to the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 17 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR 18 | ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF 19 | CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # jQuery Dependent Selects 2 | 3 | ## Overview 4 | 5 | A jQuery plugin to allow multi-level select boxes that degrade gracefully. It only changes the markup so the styling is all down to you. 6 | 7 | ## Demo 8 | 9 | You can check out some demos [over here](http://markjs.github.io/jquery-dependent-selects/)! 10 | 11 | ## Usage 12 | 13 | Ensure you have jQuery included in your page and include the `jquery-dependent-selects.js` script by adding something like this to your page's ``: 14 | 15 | *Note: Change the `src` value to match the location of the scripts.* 16 | 17 | ```html 18 | 19 | 20 | ``` 21 | 22 | Mark up your selects as you'd like them to work without JavaScript, ensuring their text displays a consistent separator. For example: 23 | 24 | ```html 25 | 37 | ``` 38 | 39 | Initiate the plugin on the selects you would like it to be activated: 40 | 41 | *Note: It's best for this be done after the DOM is ready. For more info see [this brief tutorial](http://bit.ly/TxePc).* 42 | 43 | ```javascript 44 | $('.dependent').dependentSelects(); 45 | ``` 46 | 47 | **Viola!** Your select boxes should now be dependently nested. 48 | 49 | ## Customisation 50 | 51 | There's some options you can pass into jQuery Dependent Selects when called. They are listed here showing the defaults: 52 | 53 | ```javascript 54 | $('.example-class').dependentSelects({ 55 | separator: ' > ', // String: The separator used to define the nesting in the option field's text 56 | placeholderOption: '', // String or array of strings: The text used for the sub select boxes' placeholder option. 57 | // If an array, the first 'sub' level will be the first array item, you should manually create 58 | // the top level's placeholder in the HTML. 59 | placeholderSelect: false, // Array of strings: The text used for placeholder select boxes for sub levels. 60 | class: false, // String: Add an extra class to all sub selects 61 | labels: false // Array of strings: The text used for the sub select boxes' labels. Label element is 62 | // inserted before sub select. 63 | }); 64 | ``` 65 | 66 | ## Contributing 67 | 68 | The plugin is written in CoffeeScript and a Cakefile is included with `build` and `watch` tasks. If you'd like to contribute, please write CoffeeScript and use the Cake tasks to compile it. 69 | 70 | 1. Fork project 71 | 2. Checkout to a new branch (named after the feature / change you're making) 72 | 3. Write code (as mentioned above) 73 | 4. Submit pull request 74 | 75 | ## License 76 | 77 | Licenced under MIT. Copyright Mark J Smith, Simpleweb. 78 | -------------------------------------------------------------------------------- /jquery.dependent-selects.coffee: -------------------------------------------------------------------------------- 1 | ### 2 | # jQuery Dependent Selects v1.2.2 3 | # Copyright 2012 Mark J Smith, Simpleweb 4 | # Details on http://github.com/simpleweb/jquery-dependent-selects 5 | ### 6 | 7 | (($) -> 8 | 9 | $.fn.dependentSelects = (options = {}) -> 10 | options = $.extend({ 11 | 'separator': ' > ' 12 | 'placeholderOption': '' 13 | 'placeholderSelect': false 14 | 'class': false 15 | 'labels': false 16 | }, options) 17 | 18 | createSelectId = -> 19 | # Yeah, it'll fall down if you have more than 1000 of these on a page. 20 | # But if you're doing that, then you should go outside and breathe some fresh air. 21 | int = parseInt(Math.random()*1000) 22 | if $("[data-dependent-id='#{int}']").length > 0 23 | createSelectId() 24 | else 25 | int 26 | 27 | splitName = ($name) -> 28 | array = $.map($name.split(options.separator), (valuePart) -> $.trim(valuePart)) 29 | i = 0 30 | for item in array 31 | if item == '' 32 | array.splice(i, 1) 33 | i-- 34 | i++ 35 | array 36 | 37 | splitOptionName = ($option) -> 38 | splitName($option.text()) 39 | 40 | 41 | 42 | placeholderSelectAtDepth = (depth, $select) -> 43 | depth-- 44 | placeholder = options.placeholderSelect 45 | if placeholder 46 | if placeholder == true 47 | placeholder = $select.data('dependent-select-placeholders') 48 | if typeof placeholder == 'object' 49 | if placeholder[depth] 50 | text = placeholder[depth] 51 | else 52 | text = placeholder[placeholder.length-1] 53 | else 54 | text = placeholder 55 | $("").attr({ 56 | 'data-dependent-depth': depth+1 57 | 'data-dependent-placeholder': true 58 | 'data-dependent-id': $select.attr('data-dependent-id') 59 | }) 60 | 61 | placeholderOptionAtDepth = (depth) -> 62 | depth-- 63 | placeholder = options.placeholderOption 64 | if typeof placeholder == 'object' 65 | if placeholder[depth] 66 | text = placeholder[depth] 67 | else 68 | text = placeholder[placeholder.length-1] 69 | else 70 | text = placeholder 71 | $("") 72 | 73 | labelAtDepth = (depth, $select) -> 74 | depth-- 75 | labels = options.labels 76 | if labels 77 | if labels == true 78 | labels = $select.data('dependent-labels') 79 | if labels[depth] 80 | labels[depth] 81 | else 82 | labels[labels.length-1] 83 | else 84 | false 85 | 86 | hideSelect = ($select) -> 87 | select_id = $select.attr('data-dependent-id') 88 | select_depth = $select.attr('data-dependent-depth') 89 | placeholder_select = $("select[data-dependent-placeholder][data-dependent-id='#{select_id}'][data-dependent-depth='#{select_depth}']") 90 | label = $("label[data-dependent-id='#{select_id}'][data-dependent-depth='#{select_depth}']").hide() 91 | if placeholder_select.length > 0 92 | placeholder_select.show() 93 | label.show() 94 | 95 | $select.hide() 96 | 97 | showSelect = ($select) -> 98 | select_id = $select.attr('data-dependent-id') 99 | select_depth = $select.attr('data-dependent-depth') 100 | placeholder_select = $("select[data-dependent-placeholder][data-dependent-id='#{select_id}'][data-dependent-depth='#{select_depth}']") 101 | label = $("label[data-dependent-id='#{select_id}'][data-dependent-depth='#{select_depth}']").show() 102 | if placeholder_select.length > 0 103 | placeholder_select.hide() 104 | 105 | $select.show() 106 | 107 | insertLabel = ($select, $parent) -> 108 | if label = labelAtDepth($select.attr('data-dependent-depth'), $select) 109 | select_id = $select.attr('data-dependent-id') 110 | select_depth = $select.attr('data-dependent-depth') 111 | $label = $("").attr({ 112 | 'data-dependent-id': select_id 113 | 'data-dependent-depth': select_depth 114 | }) 115 | unless $("label[data-dependent-id='#{select_id}'][data-dependent-depth='#{select_depth}']").length > 0 116 | if $parent 117 | $parent.after($label) 118 | else 119 | $select.before($label) 120 | 121 | insertPlaceholderSelect = ($select) -> 122 | if $placeholderSelect = placeholderSelectAtDepth($select.attr('data-dependent-depth'), $select) 123 | select_id = $select.attr('data-dependent-id') 124 | depth = $select.attr('data-dependent-depth') 125 | unless $("select[data-dependent-placeholder][data-dependent-id='#{select_id}'][data-dependent-depth='#{depth}']").length > 0 126 | $select.before($placeholderSelect) 127 | 128 | clearAllSelectsByParent = ($parent) -> 129 | $(".dependent-sub[data-dependent-id='#{$parent.attr('data-dependent-id')}']").each -> 130 | if parseInt($(@).attr('data-dependent-depth')) > parseInt($parent.attr('data-dependent-depth')) 131 | $(@).find('option:first').attr('selected', 'selected') 132 | hideSelect $(@) 133 | 134 | createNewSelect = (name, $select, depth) -> 135 | select_id = $select.attr('data-dependent-id') 136 | path = pathForOption($select, name) 137 | 138 | if ($currentSelect = $("select[data-dependent-path='#{path}'][data-dependent-id='#{select_id}']")).length > 0 139 | return $currentSelect 140 | 141 | $newSelect = $('").attr({ 67 | 'data-dependent-depth': depth + 1, 68 | 'data-dependent-placeholder': true, 69 | 'data-dependent-id': $select.attr('data-dependent-id') 70 | }); 71 | } 72 | }; 73 | placeholderOptionAtDepth = function(depth) { 74 | var placeholder, text; 75 | depth--; 76 | placeholder = options.placeholderOption; 77 | if (typeof placeholder === 'object') { 78 | if (placeholder[depth]) { 79 | text = placeholder[depth]; 80 | } else { 81 | text = placeholder[placeholder.length - 1]; 82 | } 83 | } else { 84 | text = placeholder; 85 | } 86 | return $(""); 87 | }; 88 | labelAtDepth = function(depth, $select) { 89 | var labels; 90 | depth--; 91 | labels = options.labels; 92 | if (labels) { 93 | if (labels === true) { 94 | labels = $select.data('dependent-labels'); 95 | } 96 | if (labels[depth]) { 97 | return labels[depth]; 98 | } else { 99 | return labels[labels.length - 1]; 100 | } 101 | } else { 102 | return false; 103 | } 104 | }; 105 | hideSelect = function($select) { 106 | var label, placeholder_select, select_depth, select_id; 107 | select_id = $select.attr('data-dependent-id'); 108 | select_depth = $select.attr('data-dependent-depth'); 109 | placeholder_select = $("select[data-dependent-placeholder][data-dependent-id='" + select_id + "'][data-dependent-depth='" + select_depth + "']"); 110 | label = $("label[data-dependent-id='" + select_id + "'][data-dependent-depth='" + select_depth + "']").hide(); 111 | if (placeholder_select.length > 0) { 112 | placeholder_select.show(); 113 | label.show(); 114 | } 115 | return $select.hide(); 116 | }; 117 | showSelect = function($select) { 118 | var label, placeholder_select, select_depth, select_id; 119 | select_id = $select.attr('data-dependent-id'); 120 | select_depth = $select.attr('data-dependent-depth'); 121 | placeholder_select = $("select[data-dependent-placeholder][data-dependent-id='" + select_id + "'][data-dependent-depth='" + select_depth + "']"); 122 | label = $("label[data-dependent-id='" + select_id + "'][data-dependent-depth='" + select_depth + "']").show(); 123 | if (placeholder_select.length > 0) { 124 | placeholder_select.hide(); 125 | } 126 | return $select.show(); 127 | }; 128 | insertLabel = function($select, $parent) { 129 | var $label, label, select_depth, select_id; 130 | if (label = labelAtDepth($select.attr('data-dependent-depth'), $select)) { 131 | select_id = $select.attr('data-dependent-id'); 132 | select_depth = $select.attr('data-dependent-depth'); 133 | $label = $("").attr({ 134 | 'data-dependent-id': select_id, 135 | 'data-dependent-depth': select_depth 136 | }); 137 | if (!($("label[data-dependent-id='" + select_id + "'][data-dependent-depth='" + select_depth + "']").length > 0)) { 138 | if ($parent) { 139 | return $parent.after($label); 140 | } else { 141 | return $select.before($label); 142 | } 143 | } 144 | } 145 | }; 146 | insertPlaceholderSelect = function($select) { 147 | var $placeholderSelect, depth, select_id; 148 | if ($placeholderSelect = placeholderSelectAtDepth($select.attr('data-dependent-depth'), $select)) { 149 | select_id = $select.attr('data-dependent-id'); 150 | depth = $select.attr('data-dependent-depth'); 151 | if (!($("select[data-dependent-placeholder][data-dependent-id='" + select_id + "'][data-dependent-depth='" + depth + "']").length > 0)) { 152 | return $select.before($placeholderSelect); 153 | } 154 | } 155 | }; 156 | clearAllSelectsByParent = function($parent) { 157 | return $(".dependent-sub[data-dependent-id='" + ($parent.attr('data-dependent-id')) + "']").each(function() { 158 | if (parseInt($(this).attr('data-dependent-depth')) > parseInt($parent.attr('data-dependent-depth'))) { 159 | $(this).find('option:first').attr('selected', 'selected'); 160 | return hideSelect($(this)); 161 | } 162 | }); 163 | }; 164 | createNewSelect = function(name, $select, depth) { 165 | var $currentSelect, $labels, $newSelect, path, select_id; 166 | select_id = $select.attr('data-dependent-id'); 167 | path = pathForOption($select, name); 168 | if (($currentSelect = $("select[data-dependent-path='" + path + "'][data-dependent-id='" + select_id + "']")).length > 0) { 169 | return $currentSelect; 170 | } 171 | $newSelect = $('