├── .github └── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── .gitignore ├── README.md ├── bower.json ├── dist ├── jquery.cascadingdropdown.js ├── jquery.cascadingdropdown.min.js └── jquery.cascadingdropdown.min.js.map ├── gulpfile.js ├── index.html ├── package-lock.json ├── package.json ├── res ├── ajax-loader.gif └── ajax-mocks.js └── src └── jquery.cascadingdropdown.js /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Link to working example** 24 | Provide a link to a working example demonstrating the bug. You can use plnkr.io, jsfiddle.net, etc for this. 25 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components/ 2 | node_modules/ 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | > **No longer maintained** 2 | 3 | # jQuery Cascading Dropdown Plugin 4 | 5 | A simple and lighweight jQuery plugin for creating cascading dropdowns. 6 | 7 | [View Demo](https://dnasir.github.io/jquery-cascading-dropdown/) 8 | 9 | ## Installation 10 | 11 | ``` 12 | npm install --save jquery-cascading-dropdown 13 | ``` 14 | 15 | Include script after the jQuery library (unless you are packaging scripts somehow else): 16 | 17 | ```html 18 | 19 | ``` 20 | 21 | ## Usage 22 | 23 | To initialize the plugin, simply attach it to the parent group of dropdown elements. 24 | 25 | ```html 26 |
68 | This is a basic dropdown setup where the second dropdown is dependent on 69 | the first dropdown having a value, and the third dropdown is dependent 70 | on either the first or second one having a value. 71 |
72 | 73 |74 | This example also shows how you can set the selected dropdown item when 75 | you initialise the plugin. This can be done either in code, or by 76 | including the HTML selected attribute on the targeted dropdown item. 77 |
78 | 79 |No matches
113 |118 | $('#example1').cascadingDropdown({ 119 | selectBoxes: [ 120 | { 121 | selector: '.step1', 122 | selected: '4.3' 123 | }, 124 | { 125 | selector: '.step2', 126 | requires: ['.step1'] 127 | }, 128 | { 129 | selector: '.step3', 130 | requires: ['.step1', '.step2'], 131 | onChange: function(event, value, requiredValues) { 132 | // do stuff 133 | 134 | // event is the change event object for the current dropdown 135 | // value is the current dropdown value 136 | // requiredValues is an object with required dropdown values 137 | // requirementsMet is a boolean value to indicate if all requirements (including current dropdown having a value) have been met 138 | } 139 | } 140 | ] 141 | });143 |
149 | This example shows how you can create a completely dynamic group of 150 | dropdowns. Dropdowns with dependencies will react based on the rules 151 | given, and fetch its own list from the server via Ajax. 152 |
153 | 154 |155 | You can provide an array of strings or objects, or a function as the 156 | dropdown data source. 157 |
158 | 159 |160 | This example also demonstrates how you can set the selected item for a 161 | dropdown in the source option. For example, you can have it select an 162 | item when it is the only item available. The plugin will select that 163 | item and trigger the change event. 164 |
165 | 166 |No matches
189 |194 | $('#example2').cascadingDropdown({ 195 | selectBoxes: [ 196 | { 197 | selector: '.step1', 198 | source: [ 199 | { label: '4.0"', value: 4 }, 200 | { label: '4.3"', value: 4.3 }, 201 | { label: '4.7"', value: 4.7 }, 202 | { label: '5.0"', value: 5 } 203 | ] 204 | }, 205 | { 206 | selector: '.step2', 207 | requires: ['.step1'], 208 | source: function(request, response) { 209 | $.getJSON('/api/resolutions', request, function(data) { 210 | var selectOnlyOption = data.length <= 1; 211 | response($.map(data, function(item, index) { 212 | return { 213 | label: item + 'p', 214 | value: item, 215 | selected: selectOnlyOption // Select if only option 216 | }; 217 | })); 218 | }); 219 | } 220 | }, 221 | { 222 | selector: '.step3', 223 | requires: ['.step1', '.step2'], 224 | requireAll: true, 225 | source: function(request, response) { 226 | $.getJSON('/api/storages', request, function(data) { 227 | response($.map(data, function(item, index) { 228 | return { 229 | label: item + ' GB', 230 | value: item, 231 | selected: index == 0 // Select first available option 232 | }; 233 | })); 234 | }); 235 | }, 236 | onChange: function(event, value, requiredValues, requirementsMet){ 237 | // do stuff 238 | } 239 | } 240 | ] 241 | });243 |
249 | This example demonstrates the plugin's capability to combine both static 250 | and dynamic dropdowns. It also demonstrates how you can set the default 251 | selected dropdown item in a dynamic dropdown scenario. 252 |
253 | 254 |No matches
281 |286 | $('#example3').cascadingDropdown({ 287 | selectBoxes: [ 288 | { 289 | selector: '.step1' 290 | }, 291 | { 292 | selector: '.step2' 293 | }, 294 | { 295 | selector: '.step3', 296 | requires: ['.step1', '.step2'], 297 | requireAll: true, 298 | source: function(request, response) { 299 | $.getJSON('/api/storages', request, function(data) { 300 | response($.map(data, function(item, index) { 301 | return { 302 | label: item + ' GB', 303 | value: item, 304 | selected: index == 0 // set to true to mark it as the selected item 305 | }; 306 | })); 307 | }); 308 | } 309 | } 310 | ], 311 | onChange: function(event, dropdownData) { 312 | // do stuff 313 | // dropdownData is an object with values from all the dropdowns in this group 314 | }, 315 | onReady: function(event, dropdownData) { 316 | // do stuff 317 | } 318 | });320 |
326 | This example demonstrates the plugin's capability to combine both 327 | standard and grouped (option group) dropdowns. 328 |
329 | 330 |No matches
357 |362 | $('#example5').cascadingDropdown({ 363 | selectBoxes: [ 364 | { 365 | selector: '.step1' 366 | }, 367 | { 368 | selector: '.step2', 369 | source: function(request, response) { 370 | $.getJSON('/api/resolutionsGrouped', request, function(data) { 371 | var newData = {}; 372 | $.each(data, function(key, value) { 373 | newData[key] = $.map(value, function(item, index) { 374 | return { 375 | label: item + 'p', 376 | value: item 377 | }; 378 | }); 379 | }); 380 | 381 | response(newData); 382 | }); 383 | } 384 | }, 385 | { 386 | selector: '.step3', 387 | requires: ['.step1', '.step2'], 388 | requireAll: true, 389 | source: function(request, response) { 390 | $.getJSON('/api/storages', request, function(data) { 391 | response($.map(data, function(item, index) { 392 | return { 393 | label: item + ' GB', 394 | value: item, 395 | selected: index == 0 // set to true to mark it as the selected item 396 | }; 397 | })); 398 | }); 399 | } 400 | } 401 | ], 402 | onChange: function(event, dropdownData) { 403 | // do stuff 404 | // dropdownData is an object with values from all the dropdowns in this group 405 | }, 406 | onReady: function(event, dropdownData) { 407 | // do stuff 408 | } 409 | });411 |
417 | You can enable multiple select by including the
418 | multiple
attribute. The value for the dropdown will then be
419 | an array of strings instead of a string. However, you will need to
420 | ensure that your backend service supports this type of data.
421 |
No matches
445 |450 | Copyright © 2013 452 | Dzulqarnain Nasir 454 |
455 |