jquery - 条件选择和正常选择

Question

我有一个功能良好的条件选择，带有两个选择框。但是，我希望能够使用第一个选择作为普通选择，并显示具有特定类名的项目，然后，如果用户想要缩小范围，他可以使用子选择以便仅显示一件商品。

See jsfiddle here .

如果您选择“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();

有人可以帮我吗？

Answer 1

看看这个。没有 switch 语句的不同方法。 my Fiddle

$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 中。