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>