'Change Dropdown jQuery to show/hide but with default place holder that shows all

How to set the jQuery so if default "Department" is selected show all, and only hide all else one other section made.

for example, if non selected will be "Department", if "Department 1" selected only show "Department 1" and same with other options.

code

 <script>
    jQuery(document).ready(function ($) {
        $("select").change(function () {
            $(this).find("option:selected").each(function () {
                var optionValue = $(this).attr("value");
                if (optionValue) {
                    $(".box").not("." + optionValue).hide();
                    $("." + optionValue).show();
                } else {
                    $(".box").hide();
                }
            });
        }).change();
    });
</script>

 <div>
        <label>
            <select>
<!--                <option value="starter" selected>Department (--><?php //echo $total; ?><!--)</option>-->
                <?php
                $tax_terms = get_terms('department', array('hide_empty' => '0'));
                foreach ($tax_terms as $tax_term):
                    ?>
                <?php
                    echo '<option value="' . $tax_term->name . '">' . $tax_term->name, '<span> (' . $tax_term->count . ')</span>' . '</option>';
                endforeach;
                ?>
            </select>
        </label>
    </div>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source