MultiSelect Dependency

MultiSelect Dependency

by web-nfo.com

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button id="reset">Reset</button>

Profile:
<select multiple id="title" class="js-connected-selectbox" data-column="title" data-is-master="true">
  <option value="">-- Select --</option>
  <option value="TestProfile1">TestProfile1</option>
  <option value="TestProfile2">TestProfile2</option>
  <option value="TestProfile3">TestProfile3</option>
  <option value="TestProfile4">TestProfile4</option>
  <option value="TestProfile5">TestProfile5</option>
</select>
<hr>
Side:
<select multiple id="side" class="js-connected-selectbox" data-column="side">
  <option value="">-- Select --</option>
  <option value="Front">Front</option>
  <option value="Back">Back</option>
</select>

Press:
<select multiple id="press" class="js-connected-selectbox" data-column="press">
  <option value="">-- Select --</option>
  <option value="TestPress1">TestPress1</option>
  <option value="TestPress2">TestPress2</option>
</select>

<hr>

<h3>All profiles:</h3>
<div id="output-profiles"></div>
<h3>Selected:</h3>
<div id="output-selected"></div>
<h3>Visible profiles:</h3>
<div id="output-profiles-visible"></div>

CSS

select { padding: 5px; border-radius:4px; }
button { padding: 5px; }
select[multiple] { min-width: 200px; min-height: 150px; }
option[disabled] { color: #e0e0e0; }

JavaScript

console.clear();

var profiles = [
	{
  	id: 1,
  	title: "TestProfile1",
    side: "Front",
    press: "TestPress1",
    visible: true
  },{
  	id: 2,
  	title: "TestProfile2",
    side: "Front",
    press: "TestPress2",
    visible: true
  },{
  	id: 3,
  	title: "TestProfile3",
    side: "Back",
    press: "TestPress1",
    visible: true
  },{
  	id: 4,
  	title: "TestProfile4",
    side: "Front",
    press: "TestPress2",
    visible: false
  },{
  	id: 5,
  	title: "TestProfile5",
    side: "Back",
    press: "TestPress1",
    visible: true
  }
];

var selected = {};

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

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;
}

function getColumns()
{
	var columns = [];
  var selected = getSelected();
	for (var key in selected) {
    if (!selected.hasOwnProperty(key)) {
      continue;
    }
    columns.push(key);
  }
  return columns;
}

var masters = [];
function getMasters()
{

}

function resetValues()
{
	getSelected();

	// Reset every column value
  for (var key in selected) {
    if (!selected.hasOwnProperty(key)) {
    	continue;
		}
    selected[key] = '';
	}
  console.log('selected after reset: ', selected);
  
  // Reset the selectboxes
  $('.js-connected-selectbox').val('');
  
  // Run the filter
  filterSelectBoxes();
}


$('.js-connected-selectbox').on('change', function() {
	var $this = $(this);
  var column = $this.attr('data-column');
  var value = $this.val();

	getSelected();

	if(column == 'title') {
    // Reset every column value
    for (var key in selected) {
      if (!selected.hasOwnProperty(key)) {
        continue;
      }
      selected[key] = '';
    }
  }


  selected[column] = value;
	console.log('selectbox on change: selected=', selected);
  
  if(column === 'title' && value...