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
