1

ページのフィルターとして機能するドロップダウンボックスがいくつかあります。いずれかを選択すると、ページが再読み込みされ、選択に基づいて投稿がフィルタリングされます。

私がやろうとしているのは、ページがリロードされるときに特定の選択を非表示にすることです。値が空白の文字列でない場合（たとえば、誰かが「オークランド」を選択した場合、リロード時にその選択入力をページから非表示にしますが、他の選択は表示されたままにする必要があります）。

これが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ではなくクラスを使用する理由は、ドロップダウンがさらにある可能性があるためです。他のページ。

4

1 に答える 1

0

ユーザーの選択を非表示にするのは良い機能ではないため、ユーザーは選択内容を確認できるだけでなく、変更することもできません。とにかく、以下がその仕事をします：

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

フォームの実際の名前またはIDを。に置き換えformNameます。

ページが読み込まれると、selectはデフォルトで表示されるため、値に基づいて非表示にするだけでよいことに注意してください。他のオプションがデフォルトで選択されたオプションとして設定されていない限り、ほとんどのブラウザでは、値はデフォルトで最初のオプションの値になることにも注意してください。

最後に、オプションにvalue属性がない場合、IE 8以下は上記の動作をしません。そのため、オプションにvalue属性があることを確認してください（テキストと同じ値を指定してください）。

于 2012-06-26T00:56:48.840 に答える