javascript - 选择值后隐藏选择(并且页面重新加载)

Question

我有一些下拉框充当页面上的过滤器。选择任一选项后，页面将重新加载并根据选择过滤帖子。

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

这是 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';
}

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

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

最后，如果选项没有 value 属性，IE 8 及更低版本将不会执行上述操作，因此请确保它们有一个(为它们提供与文本相同的值是好的)。