JSFiddle - React, Tailwind, and code Playground

by Kristoffer Berge

HTML

<div class="FilterContainer">
        <select id="SelectTenant" multiple="true">
        </select><br/>
        <button onclick="setAllTenantSelections(true)">Select All</button>
        <button onclick="setAllTenantSelections(false)">Select None</button>
</div>

JavaScript

window.onload = setupFilter;
window.onload = populateTenantFilter;
gridHeaders = [{name: "Test"},{name: "Value"},{name: "Another one"},{name: "And another"},{name: "Last one"}];

//Selecting/Deselecting all values
function setAllTenantSelections(selected) {
    var select = document.getElementById("SelectTenant");
    for (element in select.children) {
        select[element].selected = selected;
        showCol(select[element].text, selected);
    }
}

//Adding all values from array to list
function populateTenantFilter() {
    var select = document.getElementById("SelectTenant");
    select.innerHTML = "";
    for (i = 0; i < gridHeaders.length; i++) {
        var option = document.createElement("Option");
        option.innerHTML = gridHeaders[i].name;
        select.appendChild(option);
    }
    //setting all options as selected on load
    setAllTenantSelections(true);
    setupFilter();
}

//Adding onclick-events to the values
function setupFilter() {
    $('select option').on('mousedown', function (e) {
        this.selected = !this.selected;
        if (this.selected) {
            console.log("SELECTED: " + this.text);
            showCol(this.text,true);
        } else {
            console.log("DESELECTED: " + this.text);
            showCol(this.text,false);
        }
        e.preventDefault();
    });
}

function showCol(){
		//Filtering grid based on selection
}