Sandbox: JavaScript

Hides/shows a target element when it's corresponding option is selected.

If the option does not reference a target, all are hidden. Option elements should specify a data-target selector relative to the select list OR specify an array of selectors in the behavior declaration

Examples

Using data-target on each option element.

I'm the first!

I'm the second!

I'm the third!

<p>
      <select data-trigger="showOnSelect" data-showonselect-options="
        'hideClass': 'hide'
      ">
        <option data-target="!> p !> div .first">first</option>
        <option data-target="!> p !> div .second">second</option>
        <option data-target="!> p !> div .third">third</option>
      </select>
    </p>
    <p class="first">I'm the first!</p>
    <p class="second hide">I'm the second!</p>
    <p class="third hide">I'm the third!</p>

Using the targets option to specify a set of selectors referenced by index.

I'm the first!

I'm the second!

I'm the third!

<p>
      <select data-trigger="showOnSelect" data-showonselect-options="
        'hideClass': 'hide',
        'targets': ['!> p !> div .first', '!> p !> div .second', '!> p !> div .third']
      ">
        <option>first</option>
        <option>second</option>
        <option>third</option>
      </select>
    </p>
    <p class="first">I'm the first!</p>
    <p class="second hide">I'm the second!</p>
    <p class="third hide">I'm the third!</p>

Using the disableInputs option to specify to disable / enable nested inputs

I'm the first!
I'm the second!
I'm the third! Disabled as always...
<p>
      <select data-trigger="showOnSelect" data-showonselect-options="
        'hideClass': 'hide',
        'disableInputs': 'true',
        'targets': ['!> p !> div .first', '!> p !> div .second', '!> p !> div .third']
      ">
        <option>first</option>
        <option>second</option>
        <option>third</option>
      </select>
    </p>
    <div class="first">
      I'm the first!
      <input class="form-control"></input>
    </div>
    <div class="second hide">
      I'm the second!
      <input class="form-control" disabled></input>
    </div>
    <div class="third hide">
      I'm the third! Disabled as always...
      <input class="form-control" data-remain-locked disabled></input>
    </div>

Behavior Options

These options apply only to the data- tag invocation.

Name type default description
hideClass string ~ The class to add to hide the item (optional).
showClass string ~ The class to add to show the item (optional; ignored if hideClass is provided).
display string 'inline-block' If neither hideClass nor showClass are provided, falls back to setting the style on the element to inline-block but can be overridden with this option.
targets string ~ If data-target is not provided (on each option; see next option below) then you may provide an array of values that map to each option by index. See example above. This selector is run relative to the select element.
data-target string ~ Value set on each option specifying which item to show. If an option doesn't have a value set, all are hidden when it is selected. This selector is run relative to the select element.
disableInputs boolean false When disableInputs is true, disables/enables all inputs without the data-remain-locked attribute on hide/show.