https://github.com/sebastiansulinski/ssd-select
jQuery plugin to handle most common events associated with the form 'select' tag.
https://github.com/sebastiansulinski/ssd-select
ajax-call jquery-form jquery-plugin ssd-select
Last synced: 4 months ago
JSON representation
jQuery plugin to handle most common events associated with the form 'select' tag.
- Host: GitHub
- URL: https://github.com/sebastiansulinski/ssd-select
- Owner: sebastiansulinski
- License: mit
- Created: 2015-12-18T07:57:02.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2018-01-22T14:25:18.000Z (over 8 years ago)
- Last Synced: 2025-01-31T12:36:54.397Z (over 1 year ago)
- Topics: ajax-call, jquery-form, jquery-plugin, ssd-select
- Language: JavaScript
- Size: 27.3 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SSD Select
jQuery plugin to handle most common events associated with the form 'select' tag.
[See demo](http://ssd-select.ssdtutorials.com/)
## Installation
You can install this plugin via `npm`:
```
npm install ssd-select
```
## Usage instructions
First include all resources and call the plugin
```
```
### Instantiating the plugin
To instantiate the plugin you have two options.
You strictly specify what action you want to bind to a given element
```
$('[data-ssd-select]').ssdSelect({
action : 'call-redirect'
});
```
or you can tell it to dynamically obtain it from a specific attribute of that element (default is `data-ssd-select`)
```
$('[data-ssd-select]').ssdSelect({
action_attribute : 'data-ssd-select'
});
```
Additionally, you need to provide the name of the css class that will hide elements from the view (default is `dn`)
```
$('[data-ssd-select]').ssdSelect({
hide_class : 'dn'
});
```
If the value is store in a different attribute then the default `value`, you can use the `value_attribute` property.
```
$('[data-ssd-select]').ssdSelect({
value_attribute : 'data-value'
});
```
- 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 one
First
Second
```
Ajax call should return the response in the following format:
```
{
"redirect": "http://ssdtutorials.com"
}
```
#### Make ajax call and reload the page `call-reload`
```
Select one
First
Second
```
No response needed for this call.
#### Make ajax call and replace content `call-replace`
```
Select one
Replace
First
Second
```
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": "
First replacement with
",
".second-replacement-with": "Second replacement with
"
}
}
```
#### Make ajax call and perform action returned with the response `call-action`
```
Select one
Redirect
Reload
Replace
Replace with
First
Second
Third
Fourth
```
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 one
First
Second
```
#### Show selected and hide others `show-hide`
```
Select one
First
Second
Third
First
Second
Third
```