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

Viewed 20

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>
0 Answers
Related