2

2 つの選択ボックスを備えた適切に機能する条件付き選択があります。ただし、最初の選択を通常の選択として使用して、特定のクラス名のアイテムを表示し、ユーザーが絞り込みたい場合は、サブ選択を使用してのみ表示できるようにしたいと考えています。一項目。

ここでjsfiddleを参照してください。

「Apple」を選択した場合は、サブセレクトで Apple モデルのいずれかを選択する必要があります。最初の選択ボックスで「Apple」を選択すると、すべての Apple モデル (たとえば class="apple") を表示できるようにしたいと考えています。

最初にいくつかのコードを書き込もうとしましたが、うまくいきません。

 var selectedprod = $("#selectprod").val();
 $(".ct-content-container-box").hide();
 $('.' + selectedprod).parent('.ct-content-container-box').fadeToggle("slow", "linear");
 $('#selector').blur();

誰か手を貸してくれませんか？

4

2 に答える 2

2

これをチェックしてください。switch ステートメントを使用しない別のアプローチ。私のフィドル

$selectprod = $('#selectprod');
$selector = $('#selector');

$selectprod.change(function() {
    $options = $('.ct-content-container-box.skin-white');
    $selector.empty();
    $selector.append("<option value='showall'>Sub select</option>");

    $options.show();
    $currentSelection = $(this).val();
    if ($currentSelection != "showallprod") {
        $options.children().each(function() {
            if (!($(this).hasClass($currentSelection))) {
                $(this).parent($options).hide();
            } else {
                $selector.append("<option value='" + $(this).attr('id') + "'>" + $(this).text() + "</option>");
            }
        });
    }
});

また、値が既に HTML に存在するため、サブ選択オプションを手動で追加する理由はありません。

于 2012-11-08T16:21:48.967 に答える
1

ここでの唯一の問題は大文字と小文字の区別だと思います。値は大文字で始まりますが、対応するクラスは大文字ではありません。追加.toLowerCase()したばかりで、機能しているようです。

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

    var selectedprod = $(this).val().toLowerCase();
    $(".ct-content-container-box").hide();
    $('.' + selectedprod).parent('.ct-content-container-box').fadeToggle("slow", "linear");
    $('#selector').blur();

});​

更新されたFIDDLEを参照してください。

于 2012-11-08T15:31:13.120 に答える