Skip to content

jQuery plugin to handle most common events associated with the form 'select' tag.

License

Notifications You must be signed in to change notification settings

sebastiansulinski/ssd-select

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

SSD Select

jQuery plugin to handle most common events associated with the form 'select' tag.

See demo

Installation

You can install this plugin via npm:

npm install ssd-select

Usage instructions

First include all resources and call the plugin

<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./node_modules/ssd-select/src/jquery.ssd-select.min.js"></script>

Instantiating the plugin

To instantiate the plugin you have two options. You strictly specify what action you want to bind to a given element

<script>
    $('[data-ssd-select]').ssdSelect({
        action : 'call-redirect'
    });
</script>

or you can tell it to dynamically obtain it from a specific attribute of that element (default is data-ssd-select)

<script>
    $('[data-ssd-select]').ssdSelect({
        action_attribute : 'data-ssd-select'
    });
</script>

Additionally, you need to provide the name of the css class that will hide elements from the view (default is dn)

<script>
    $('[data-ssd-select]').ssdSelect({
        hide_class : 'dn'
    });
</script>

If the value is store in a different attribute then the default value, you can use the value_attribute property.

<script>
    $('[data-ssd-select]').ssdSelect({
        value_attribute : 'data-value'
    });
</script>
  • The action allows you to specify a single action to be used on the select object.
  • The action_attribute represents the attribute that will store the type of the action required for a given select object.
  • The hide_class is used to specify the class name that has display set to none as it will be used to show and hide certain elements.
  • The value_attribute allows you to specify which attribute of the option tag should be used instead of a default value
.dn {
    display: none;
}

Available actions

You're now ready to apply it to your select elements

Make ajax call and redirect call-redirect

<select data-ssd-select="call-redirect">
    <option value="/">Select one</option>
    <option value="./calls/redirect.json">First</option>
    <option value="./calls/redirect.json">Second</option>
</select>

Ajax call should return the response in the following format:

{
  "redirect": "http://ssdtutorials.com"
}

Make ajax call and reload the page call-reload

<select data-ssd-select="call-reload">
    <option value="/">Select one</option>
    <option value="./calls/reload.json">First</option>
    <option value="./calls/reload.json">Second</option>
</select>

No response needed for this call.

Make ajax call and replace content call-replace

<select data-ssd-select="call-replace">
    <option value="/">Select one</option>
    <option value="./calls/replace.json">Replace</option>
</select>

<div class="first-replacement">First</div>
<div class="second-replacement">Second</div>

Ajax call should return the response in the following format:

{
  "replace": {
    ".first-replacement": "First replacement",
    ".second-replacement": "Second replacement"
  }
}

Make ajax call and replace elements call-replace-with

Select one Replace
First
Second

Ajax call should return the response in the following format:

{
  "replace": {
    ".first-replacement-with": "<p>First replacement with</p>",
    ".second-replacement-with": "<p>Second replacement with</p>"
  }
}

Make ajax call and perform action returned with the response call-action

<select data-ssd-select="call-action">
    <option value="/">Select one</option>
    <option value="./calls/action-redirect.json">Redirect</option>
    <option value="./calls/action-reload.json">Reload</option>
    <option value="./calls/action-replace.json">Replace</option>
    <option value="./calls/action-replace-with.json">Replace with</option>
</select>

<div class="action-first-replacement">First</div>
<div class="action-second-replacement">Second</div>

<div class="action-third-replacement-with">Third</div>
<div class="action-fourth-replacement-with">Fourth</div>

Ajax call should return the response as it would for any of the relevant actions plus the index action to indicate the desired action i.e.

{
  "action": "redirect",
  "redirect": "http://ssdtutorials.com"
}

Navigate to go-to

<select data-ssd-select="go-to">
    <option value="/">Select one</option>
    <option value="./calls/go-to-1.html">First</option>
    <option value="./calls/go-to-2.html">Second</option>
</select>

Show selected and hide others show-hide

<select data-ssd-select="show-hide">
    <option value="/">Select one</option>
    <option value="#" data-target=".first">First</option>
    <option value="#" data-target=".second">Second</option>
    <option value="#" data-target=".third">Third</option>
</select>

<div class="first">First</div>
<div class="second dn">Second</div>
<div class="third dn">Third</div>

About

jQuery plugin to handle most common events associated with the form 'select' tag.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published