조건부 및 일반 선택

Question

2 개의 선택 상자가있는 정상적으로 작동하는 조건부 선택이 있습니다. 그러나 첫 번째 선택을 일반 선택으로 사용하고 특정 클래스 이름으로 항목을 표시 할 수있게하려는 경우 사용자가 범위를 좁히려면 하위 선택을 사용하여 표시 할 수 있습니다. 단 하나의 항목.

See jsfiddle here.

"Apple"을 선택한 경우 하위 선택에서 Apple 모델 중 하나를 선택해야합니다. 첫 번째 선택 상자에서 "Apple"을 선택하면 모든 Apple 모델 (예 : class = "apple")을 표시 할 수 있기를 원합니다.

는

I로 시작하는 코드를 작성하는 것을 시도했다 -하지만 누군가가 나에게 손을 줄 수

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

:이 작동하지 않습니다?

Answer 1

확인해보세요. switch 문없이 다른 접근법. 값이 이미 HTML에 존재하는 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>"); 
      } 
     }); 
    } 
}); 

또한, 이유는, 수동으로 하위 선택 옵션을 추가 없습니다.

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 업데이트를 참조하십시오.