Display Content Based On Dropdown Selection - dm-select-show

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.

<link href="/path/to/dist/jquery-dm-select-show.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<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.

<div id="european_animals">
  <select class="option_select">
    <option value="0">European Badger</option>
    <option value="1">Italian Wolf</option>
    <option value="2">European Polecat</option>
    <option value="3">European Roller</option>
    <option value="4">Broad-bodied Chaser</option>
    <option value="5">European Otter</option>
  </select>
  <div class="content">
    <div class="option_element" data-option="0">
      <h2>European Badger</h2>
      <p>Size: 60-110 cm</p>
      <p>Weight: 10-16 kg</p>
    </div>
    <div class="option_element" data-option="1">
      <h2>Italian Wolf</h2>
      <p>Size: 90-130 cm</p>
      <p>Weight: 20-30 kg</p>
    </div>
    <div class="option_element" data-option="2">
      <h2>European Polecat</h2>
      <p>Size: 30-60 cm</p>
      <p>Weight: 400-1.500 g</p>
    </div>
    <div class="option_element" data-option="3">
      <h2>European Roller</h2>
      <p>Size: 31-32 cm</p>
      <p>Weight: 127-160 g</p>
    </div>
    <div class="option_element" data-option="4">
      <h2>Broad-bodied Chaser</h2>
      <p>Size: 4-5 cm</p>
      <p>Weight: 1-3 g</p>
    </div>
    <div class="option_element" data-option="5">
      <h2>European Otter</h2>
      <p>Size: 57-70 cm</p>
      <p>Weight: 7-10 kg</p>
    </div>
  </div>
</div>

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

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

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

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

5. Override the default selectors.

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

Changelog:

v1.1.0 (2022-06-27)

• Improved code

---

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