选择值时隐藏选择（并重新加载页面）

Question

我有一些下拉框充当页面上的过滤器。 When either one is selected the page reloads and filters the posts based on the selection.

我想要做的是在页面重新加载时隐藏特定选择，如果该值不是空白字符串（例如，如果有人选择“奥克兰”，我希望该选择输入在它出现时从页面中消失重新加载，但其他选择应保持可见）。

这里是 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>

这是我使用 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();
        }
    });

我已经尝试了各种方法，但我得到的最接近的是隐藏所有下拉列表的页面（应该只适用于已选择的下拉列表。我使用类而不是 ID 的原因是因为可能有其他页面上的更多下拉菜单。

Answer 1

隐藏用户的选择不是一个好功能，因此他们不仅看不到他们选择的内容，而且他们也无法更改它。无论如何，以下将完成这项工作：

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

将formName 替换为表单的实际名称或ID。

请注意，当页面加载时，默认情况下选择是可见的，因此只需根据其值隐藏它。另请注意，在大多数浏览器中，默认情况下该值将是第一个选项的值，除非将其他选项设置为默认选定选项。

最后，如果选项没有 value 属性，IE 8 及更低版本将不会与上述行为一致，因此请确保它们有一个（赋予它们与文本相同的值是好的）。