MultiSelect Dependency Array

MultiSelect Dependency Array

by web-nfo.com

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="options">
  <button id="reset">Reset</button>
  <button id="multiple">Toggle Multi-select (for testing)</button>
</div>

<hr>

Kleurprofiel:
<select class="js-connected-selectbox" data-column="title" data-is-master="true">
  <option data-reset-text="Reset alles" value="">Maak een keuze...</option>
  <option value="Profiel_Bui_FK16S_BOPP">Profiel_Bui_FK16S_BOPP (1)</option>
  <option value="Profiel_Bui_MPS_Zwart">Profiel_Bui_MPS_Zwart (2)</option>
  <option value="Profiel_Bin_FK16S_Wit">Profiel_Bin_FK16S_Wit (3)</option>
  <option value="Profiel_Bui_MPS_PET">Profiel_Bui_MPS_PET (4)</option>
  <option value="Profiel_Bin_FK16S_Silk">Profiel_Bin_FK16S_Silk (5)</option>
  <option value="Profiel_Bin_Uteco_BOPP">Profiel_Bin_Uteco_BOPP (6)</option>
</select>

<hr>

>>>>>>> &nbsp;&nbsp;&nbsp;&nbsp;
Drukzijde:
<select class="js-connected-selectbox" data-column="side">
  <option data-reset-text="Reset alles" value="">Maak een keuze...</option>
  <option value="Buitendruk">Buitendruk</option>
  <option value="Binnendruk">Binnendruk</option>
</select>

Pers:
<select class="js-connected-selectbox" data-column="press">
  <option data-reset-text="Reset alles" value="">Maak een keuze...</option>
  <option value="FK16S">FK16S</option>
  <option value="MPS">MPS</option>
  <option value="Uteco">Uteco</option>
</select>

Substraat:
<select class="js-connected-selectbox" data-column="substrate">
  <option data-reset-text="Reset alles" value="">Maak een keuze...</option>
  <option value="Silk papier">Silk papier</option>
  <option value="Transparant BOPP">Transparant BOPP</option>
  <option value="Transparant PET">Transparant PET</option>
  <option value="Wit papier">Wit papier</option>
  <option value="Zwart papier">Zwart papier</option>
</select>

<hr>

Drukspecificaties:
<select class="js-connected-selectbox" data-column="drukspec">
  <option data-reset-text="Reset alles"...

CSS

* { background: #fff; font-family: arial; font-size:12px; }
.options { background: #336df3; padding:5px; }
select { padding: 5px; border-radius:4px; }
button { padding: 5px; }
select[multiple] { min-width: 150px; min-height: 150px; }
option[disabled] { color: #e0e0e0; }

JavaScript

console.clear();

// This is the MAIN array of data
var profiles = [
	{
  	id: 1,
  	title: "Profiel_Bui_FK16S_BOPP",
    side: "Buitendruk",
    press: "FK16S",
    substrate: "Transparant BOPP",
    drukspec: ['spec1', 'spec2'],
    visible: true
  },{
  	id: 2,
  	title: "Profiel_Bui_MPS_Zwart",
    side: "Buitendruk",
    press: "MPS",
    substrate: "Zwart papier",
    drukspec: ['spec1', 'spec2', 'spec3'],
    visible: true
  },{
  	id: 3,
  	title: "Profiel_Bin_FK16S_Wit",
    side: "Binnendruk",
    press: "FK16S",
    substrate: "Wit papier",
    drukspec: ['spec2'],
    visible: true
  },{
  	id: 4,
  	title: "Profiel_Bui_MPS_PET",
    side: "Buitendruk",
    press: "MPS",
    substrate: "Transparant PET",
    drukspec: ['spec3'],
    visible: false
  },{
  	id: 5,
  	title: "Profiel_Bin_FK16S_Silk",
    side: "Binnendruk",
    press: "FK16S",
    substrate: "Silk papier",
    drukspec: ['spec1', 'spec2'],
    visible: true
  },{
  	id: 6,
  	title: "Profiel_Bin_Uteco_BOPP",
    side: "Binnendruk",
    press: "Uteco",
    substrate: "Transparant BOPP",
    drukspec: ['spec1', 'spec4'],
    visible: true
  }
];

var selected = {};

$('#reset').on('click', function() {
	resetValues();
});

$('#multiple').on('click', function() {
	if($('.js-connected-selectbox').attr('multiple')) {
  	$('.js-connected-selectbox').attr('multiple', false);
  } else {
  	$('.js-connected-selectbox').attr('multiple', 'multiple');
  }
});

// Return (or create and return) an object of selected columns
function getSelected()
{
	if( $.isEmptyObject(selected) ) {
  	$('.js-connected-selectbox').each(function(index, element) {
    	var $this = $(this);
    	var column = $this.attr('data-column');
      selected[column] = '';
    });
  }
  return selected;
}

// Get column names from the selectboxes
function getColumns()
{
	var columns = [];
  var selected = getSelected();
	for (var key in selected) {
    if (!selected.hasOwnProperty(key)) {
      continue;
    }
   ...