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 回答