Question

我有一些下拉框用作页面上的过滤器。当选择任何一个页面时，页面将根据选择重新加载并过滤帖子。

我正在尝试做的是，当页面重新加载时隐藏特定选择，如果值不是空白字符串（例如，如果有人选择'奥克兰'，我希望选择输入从页面中消失时重新加载，但另一个选择应该保持可见。）

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

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

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

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

1 个答案: