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.
yarn add select-sync
npm install select-sync
bower install select-sync
# Gemfile
source 'https://rails-assets.org' do
gem 'rails-assets-select-sync'
end
# app/assets/javascripts/application.js
/*
*= require select-sync
*/$("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');
}
});
});- 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.
Created by Weston Ganger - @westonganger