1

別の選択フィールドで絞り込むときに選択オプションを非表示にしたい非常に単純なフォームがあります。

現在、オプションでインライン スタイルを試しdispay: noneましたが、非表示にはなりません。

私はクロムを使用していますが、これはすべてのブラウザーで機能する必要があります。グーグルであまり見つけられないように見えるので、誰かが光を当てることができますか。


ここで私の問題を見てください... http://jsfiddle.net/3vPgY/5/


そして、ここに私の現在のコード...

<form>
    <select id="refine">
        <option class="default" value="0">Please refine...</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
        <option value="red">Red</option>
    </select>
    <select id="everything" disabled="disabled">
        <option class="default" value="">Please select</option>
        <option class="green" value="green-sel">Show only if Green selected</option>
        <option class="green" value="green-sel">Show only if Green selected</option>
        <option class="green" value="green-sel">Show only if Green selected</option>
        <option class="blue" value="blue-sel">Show only if Blue selected</option>
        <option class="blue" value="blue-sel">Show only if Blue selected</option>
        <option class="blue" value="blue-sel">Show only if Blue selected</option>
        <option class="red" value="red-sel">Show only if Red selected</option>
        <option class="red" value="red-sel">Show only if Red selected</option>
        <option class="red" value="red-sel">Show only if Red selected</option>
    </select>
</form>


そして、2番目のドロップダウンをフィルタリングするためのサポートである私のjqueryスクリプト...

$('#refine').change(function () {

    var refine = $('option:selected', this).val().replace(/ /g, "-");

    if (refine != 0) {

        $('#everything').removeAttr('disabled');
        $('#everything option:not(.default)').css('display', 'none');
        $('#everything .' + refine).css('display', 'block');

    } else {

        $('#everything').attr('disabled', 'disabled');
        $('#everything option:not(.default)').css('display', 'none');

    }

});


ご覧のとおり、オプションを非表示にしたいだけで、削除したくありません。これは、最初のドロップダウンの選択が変更された場合に、どうにか元に戻すことができるようにするためです。

どんなアドバイスも最も役に立ちます-またはおそらく回避策です。


ありがとう


http://jsfiddle.net/3vPgY/5/

4

4 に答える 4

1

あなたが考えていることを達成するためのより簡単な方法は、2番目のドロップダウンの代わりに3つの異なるドロップダウンリストを用意することだと思います。次に、最初のドロップダウンで、その値に基づいて表示するものを選択できます。

はるかに簡単です。

この変更により、コールバックを簡単に行うことができます。

$('#refine').change(function () {
    var refine = $('option:selected', this).val().replace(/ /g, "-");

    $('.refined').removeClass('hidden').addClass('hidden');
    $('#'+refine).removeClass('hidden').removeAttr('disabled');
});

編集：私はあなたのフィドルをフォークしました（そして多分あなたのオリジナルを編集しましたか？）。私が提案した変更があります。

于 2013-01-24T23:09:09.307 に答える
1

最後に、私はjquery cloneを使用しましたが、これはうまくいったようです。

http://jsfiddle.net/3vPgY/10/

var everything = $('#everything').clone(true);

$('#refine').change(function () {

    var selectColour = $('option:selected', this).val().replace(/ /g, "-");

    if (refine != 0) {

        var everythingRefined = everything.clone(true).find('.default,.'+selectColour);

        $('#everything').removeAttr('disabled');
        $('#everything').empty().append(everythingRefined);

    } else {

        $('#everything').attr('disabled', 'disabled');

    }

});
于 2013-01-25T17:56:45.410 に答える
0

個々のオプションを非表示/削除することはできませんdisabled。それらに属性を適用するだけです。それらはグレー表示されますが、選択できません。

選択のデフォルト構成のすべてのデータを持つ変数オブジェクトをプログラムで保持できます。次に、オプションを削除する必要がある場合は、すべての条件が一致したときに選択に何を入れる必要があるかを知る方法があります。

于 2013-01-24T23:02:19.453 に答える
0

これは最善の方法ではありません。選択を動的に構築するのが最善です。ただし、この方法で行う必要がある場合は、次のコードを使用してください。

    $('#refine').change(function () {

        var selected = $(this).val();
        $("#everything option").wrap("<span style='display:none' />");
        $("#everything option." + selected).unwrap();
        $("#everything").attr('disabled',false);

});

ここでフォークしました：http://jsfiddle.net/AyX9Q/

オプションをスパンでラップして非表示にする方法を示すためだけに、コードは最小限であることに注意してください。最初の選択で「選択してください」に戻った場合、すべてのオプションを表示するロジックはありません。

于 2013-01-24T23:33:14.293 に答える