Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/westonganger/select-sync
Javascript plugin for HTML `select` elements to synchronize by selected or disabled options
https://github.com/westonganger/select-sync
array disabled multi-select select selected sync synchronization
Last synced: 22 days ago
JSON representation
Javascript plugin for HTML `select` elements to synchronize by selected or disabled options
- Host: GitHub
- URL: https://github.com/westonganger/select-sync
- Owner: westonganger
- License: mit
- Created: 2017-02-17T20:03:37.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-07-13T06:50:39.000Z (over 6 years ago)
- Last Synced: 2024-10-16T02:41:15.733Z (about 1 month ago)
- Topics: array, disabled, multi-select, select, selected, sync, synchronization
- Language: JavaScript
- Homepage:
- Size: 22.5 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# select-sync
`select-sync` is a plugin to synchronize selects by selected or disabled options. Works great for many selects which are for an array or multiple selects for one value.
Requires a DOM library such as jQuery, Zepto, or any other $ library.
# Install
#### Yarn, NPM, or Bower
```
yarn add select-sync
npm install select-sync
bower install select-sync
```
#### Rails Install
```ruby
# Gemfile
source 'https://rails-assets.org' do
gem 'rails-assets-select-sync'
end
# app/assets/javascripts/application.js
/*
*= require select-sync
*/
```
# Usage
```javascript
$("select[name='myArray[]']").selectSync('disableSelected', {
alwaysDisabledValues: [], // if you have some option values that should always stay disabled
beforeSync: function(selects){
// do something if you want to
},
afterSync: function(selects){
$(selects).trigger('chosen:updated');
}
});
$("select[name='myArray[]']").selectSync('selected', {
beforeSync: function(selects){
// do something if you want to
},
afterSync: function(selects){
$(selects).trigger('chosen:updated');
}
});
// Remove select sync
$('select[data-sync-disable-selected]').selectSync('disableSelected', 'destroy');
$('select[data-sync-selected]').selectSync('selected', 'destroy');
$('#add').click(function(){
// add new selects
//reinitialize sync to include new selects
$("select[name='myArray[]']").selectSync('disableSelected', {
alwaysDisabledValues: [], // if you have some option values that should always stay disabled
beforeSync: function(selects){
// do something if you want to
},
afterSync: function(selects){
$(selects).trigger('chosen:updated');
}
});
});
```
# Limitations
* Currently can only have one sync per type per select.
* Doesnt work for multi-selects. They try to solve the same issue as this plugin. I would try using a chosen multi-select before resorting to using this plugin.
# Credits
Created by Weston Ganger - @westonganger