jQuery Plugins by Fredi Bach: InputNotes, AutoAnchors, RandomClass, RemoveOverflow, aPartHide, TabSelect, DefaultsTagger, SelectSwitcher, LivingFade, SlideInReplace, WaveAnimate, jKit (external)

SelectSwitcher jQuery Plugin

A plugin to switch content visibility based on the selected option of a select. Use the full power of jQuery to define your affected elements.

Demo Usage Styling Download Compatibility Changelog


Below is a demo of the plugin where we switch on an off different list elements based on the selected option of the select:

You can of course target any kind of element you want to affect. Anything in the DOM that jQuery can target can be used!


This is how we called the plugin for the demo above:

  affectedElements: { 
    'audi': '#myelements #audi', 
    'fiat': '#myelements #fiat', 
    'ford': '#myelements #ford', 
    'peugeot': '#myelements #peugeot', 
    'ferrari': '#myelements #ferrari' 
  stateConfigs: {
    'all': [ 'audi', 'fiat', 'ford', 'peugeot', 'ferrari' ],
    'none': [ ],
    'selection1': [ 'audi', 'fiat' ],
    'selection2': [ 'ford', 'ferrari' ],
    'selection3': [ 'audi', 'ford', 'ferrari' ]
  defaultConfigs: [ 'audi', 'fiat', 'ford', 'peugeot', 'ferrari' ]

The "affectedElements" option defines all elements that should be hidden or shown by the plugin.

Inside the "stateConfigs" option, you define which elements should be shown on which select option.

The "defaultConfigs" option defines the elements that should be shown if nothing is selected or if something is selected that isn't defined in the "stateConfigs".

Additionally there is an option "speed" that defines how fast the elements should be shown or hidden. Set speed to "0" to get an instant action.


Well, feel free to style your elements however you want. ;-)


Current version: jquery.selectswitcher-0.2.js (1.8k not minified)


Tested in:


There really is nothing complicated in there, so expect the plugin to work in older browsers as well.