jobqueryfilter

by Jason Crowther

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/fonts/glyphicons-halflings-regular.eot"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/fonts/glyphicons-halflings-regular.svg"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/fonts/glyphicons-halflings-regular.ttf"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/fonts/glyphicons-halflings-regular.woff"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/fonts/glyphicons-halflings-regular.woff2"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<div class="container">
  
<div class="form-group">
<label for="jobgroupfilter">Job Group(s)</label>
<select class="form-control selectpicker jobgroupfilter" name="j" id="jobgroupfilter" multiple="multiple" data-selected-text-format="count > 2" data-none-selected-text="Choose job groups" data-header="Close" tabindex="-98">
        <option class="setall" value="all" selected="">All Jobs</option>
        <optgroup label="Job Groups">
            <option value="1">East Side</option>
            <option value="3">West Side</option>
            <option value="2">Kitchen</option>
            <option value="4">Occasional Jobs</option>
            <option value="other">Other</option>
        </optgroup>
    </select>  

</div>
</div>

JavaScript

$('.jobgroupfilter').on('changed.bs.select', function (e, clickedIndex, selected, deselected) {
        //clickedIndex is option i clicked on to trigger event
        //selected is set to true if it was selected
        //deselected set to true it was deselected

        var selectedoption = $('.jobgroupfilter option').eq(clickedIndex).val();

        //we only care if something was selected
        if ( selected == true ){

            //if option that was selected was all jobs - clear all other options
            if ( selectedoption == 'all' ){
                $('.jobgroupfilter').selectpicker('deselectAll');
                $('.jobgroupfilter').selectpicker('val', 'all');
            }
            else{

                //if option that was clicked was not all - but all is selected - remove all jobs as an option
                if ( $('.jobgroupfilter option[value="all"]').is(':selected') ){

                    $('.jobgroupfilter option[value="all"]').prop("selected", false);
                    $('.jobgroupfilter').selectpicker('render');

                }
            }
        }
    });