Question

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

如果选择“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中已经存在这些值。

Answer 2

我认为这里唯一的问题是区分大小写。您的值以大写字母开头，但相应的类不是。刚刚添加了.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。

条件和正常选择

2 个答案: