This time I will share jQuery Plugin and tutorial about Display Content Based On Dropdown Selection – dm-select-show, hope it will help you in programming stack.
dm-select-show is a tiny jQuery plugin for conditionally showing or hiding DOM elements based on the option value you selected in a dropdown select.
How to use it:
1. To get started, simply include the plugin’s files after the latest jQuery library (slim build is recommended) is loaded.
1 |
< link href = "/path/to/dist/jquery-dm-select-show.css" rel = "stylesheet" /> |
2 |
< script src = "/path/to/cdn/jquery.slim.min.js" ></ script > |
3 |
< script src = "/path/to/dist/jquery-dm-select-show.min.js" ></ script > |
2. Create a select box and associated content blocks as follows. The data-option attribute is used to indicate the content that should be shown or hidden by the value selected from the dropdown.
01 |
< div id = "european_animals" > |
02 |
< select class = "option_select" > |
03 |
< option value = "0" >European Badger</ option > |
04 |
< option value = "1" >Italian Wolf</ option > |
05 |
< option value = "2" >European Polecat</ option > |
06 |
< option value = "3" >European Roller</ option > |
07 |
< option value = "4" >Broad-bodied Chaser</ option > |
08 |
< option value = "5" >European Otter</ option > |
11 |
< div class = "option_element" data-option = "0" > |
12 |
< h2 >European Badger</ h2 > |
13 |
< p >Size: 60-110 cm</ p > |
14 |
< p >Weight: 10-16 kg</ p > |
16 |
< div class = "option_element" data-option = "1" > |
18 |
< p >Size: 90-130 cm</ p > |
19 |
< p >Weight: 20-30 kg</ p > |
21 |
< div class = "option_element" data-option = "2" > |
22 |
< h2 >European Polecat</ h2 > |
24 |
< p >Weight: 400-1.500 g</ p > |
26 |
< div class = "option_element" data-option = "3" > |
27 |
< h2 >European Roller</ h2 > |
29 |
< p >Weight: 127-160 g</ p > |
31 |
< div class = "option_element" data-option = "4" > |
32 |
< h2 >Broad-bodied Chaser</ h2 > |
36 |
< div class = "option_element" data-option = "5" > |
37 |
< h2 >European Otter</ h2 > |
39 |
< p >Weight: 7-10 kg</ p > |
3. Initialize the dm-select-show plugin on the top container and done.
2 |
$( '#european_animals' ).selectShow(); |
4. Determine which content block should be shown on init. Default: null(none).
1 |
$( '#european_animals' ).selectShow({ |
5. Override the default selectors.
1 |
$( '#european_animals' ).selectShow({ |
2 |
SelectOption: '.option_select' , |
3 |
ListElement: '.option_element' |
This awesome jQuery plugin is developed by davidemancuso. For more Advanced Usages, please check the demo page or visit the official website.