Javascript plugin for HTML `select` elements to synchronize by selected or disabled options
JavaScript HTML
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
src
.editorconfig
.gitignore
CHANGELOG.md
LICENSE
README.md
bower.json
gulpfile.js
index.html
package.json

README.md

select-sync

NPM Version NPM Downloads Buy Me a Coffee

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

# Gemfile
source 'https://rails-assets.org' do
  gem 'rails-assets-select-sync'
end


# app/assets/javascripts/application.js
/*
 *= require select-sync
*/

Usage

$("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