display content dropdown selection - Free Download Display Content Based On Dropdown Selection - dm-select-show

Free Download Display Content Based On Dropdown Selection – dm-select-show

Posted on

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.

display content dropdown selection - Free Download Display Content Based On Dropdown Selection - dm-select-show
File Size: 8.64 KB
Views Total: 727
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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>
09   </select>
10   <div class="content">
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>
15     </div>
16     <div class="option_element" data-option="1">
17       <h2>Italian Wolf</h2>
18       <p>Size: 90-130 cm</p>
19       <p>Weight: 20-30 kg</p>
20     </div>
21     <div class="option_element" data-option="2">
22       <h2>European Polecat</h2>
23       <p>Size: 30-60 cm</p>
24       <p>Weight: 400-1.500 g</p>
25     </div>
26     <div class="option_element" data-option="3">
27       <h2>European Roller</h2>
28       <p>Size: 31-32 cm</p>
29       <p>Weight: 127-160 g</p>
30     </div>
31     <div class="option_element" data-option="4">
32       <h2>Broad-bodied Chaser</h2>
33       <p>Size: 4-5 cm</p>
34       <p>Weight: 1-3 g</p>
35     </div>
36     <div class="option_element" data-option="5">
37       <h2>European Otter</h2>
38       <p>Size: 57-70 cm</p>
39       <p>Weight: 7-10 kg</p>
40     </div>
41   </div>
42 </div>

3. Initialize the dm-select-show plugin on the top container and done.

1 $(function(){
2   $('#european_animals').selectShow();
3 });

4. Determine which content block should be shown on init. Default: null(none).

1 $('#european_animals').selectShow({
2   ShowElement: 0 // content 1
3 });

5. Override the default selectors.

1 $('#european_animals').selectShow({
2   SelectOption: '.option_select',
3   ListElement: '.option_element'
4 });

This awesome jQuery plugin is developed by davidemancuso. For more Advanced Usages, please check the demo page or visit the official website.