Question

I have some drop-down boxes that act as filters on a page. When either one is selected the page reloads and filters the posts based on the selection.

What I’m trying to do, is hide a particular select when the page reloads, if the value is not a blank string (e.g. if someone selects ‘Auckland’, I want that select input to disappear from the page when it reloads, but the other select should stay visible).

Here is the HTML…

<ul>
<li>
    <label style="display:none;">Location:</label>
    <select onchange="this.form.submit();" name="locations" class="filter-dropdown">
        <option value="">SELECT</option>
        <option value="auckland" class="level-0">Auckland</option>
        <option value="tauranga" class="level-0">Tauranga</option>
        <option value="wellington" class="level-0">Wellington</option>
    </select>
</li>
<li>
    <label style="display:none;">Product or service:</label>
    <select onchange="this.form.submit();" name="typeofproduct" class="filter-dropdown">
        <option value="">SELECT</option>
        <option value="clothing" class="level-0">Clothing</option>
        <option value="food" class="level-0">Food</option>
        <option value="shoes" class="level-0">Shoes</option>
        <option value="travel" class="level-0">Travel</option>
    </select>
</li>

And here is my poor attempt at using jQuery…

    jQuery('.filter-dropdown').bind('change', function(event) {

        var x = jQuery(".filter-dropdown option:selected").text();

        if (x == "") {
            jQuery(this).show();
        }
        else{
            jQuery(this).hide();
        }
    });

I’ve tried various this, but the closest I’ve got is the page hiding all the dropdowns (should only be for ones that have been selected. The reason I’m using classes and not ID’s is because there may be more dropdowns on other pages.

Answer 1

It’s not a good feature to hide the user’s selection so not only can’t they see what they selected, but they can’t change it either. Anyway, the following will do the job:

var element = docment.formName.locations;
if (element.value != '') {
  element.style.display = 'none';
}

Substitute the actual name or ID of the form for formName.

Note that when the page loads, the select will be visible by default so it only needs to be hidden based on its value. Note also that the value will be the value of the first option by default in most browsers unless some other option is set as the default selected option.

Finally, IE 8 and lower will not behave with the above if the options don’t have a value attribute, so make sure they have one (giving them the same value as their text is good).