jQuery 선택 값 조합

Question

현재 학교 프로젝트를 진행하고 있으며 jQuery 스크립트에 대한 도움이 필요합니다. < 선택> 상자로 전체 순위 시스템을 필터링하고 싶습니다.

나는 다음있어 그리고 그것은 jQuery를

$(document).ready(function() { 

    $(".ranking-item").not(":first").hide(); //prevent seeing nothing 

    $("select").change(function() { 

    $('.ranking-item').hide(); 
    var targetId = $(this).val(); 
    $('#'+targetId).show(); 
    }) 

}); 

으로

<select> 
    <option value="all">All</option> 
    <option value="cars">Cars</option 
</select> 

<div id="all" class="ranking-item">All rankings</div> 
<div id="cars" class="ranking-item">Cars rankings</div> 

작동하지만이

<select> 
    <option value="all">All</option> 
    <option value="cars">Cars</option 
</select> 

<select> 
    <option value="lap1">Lap 1</option> 
    <option value="lap2">Lap 2</option 
</select> 

예상 출력이 될 것 같은 나는, 1 개 필터를 원하는

<div id="all lap1" class="ranking-item">All rankings</div> 
<div id="all lap2" class="ranking-item">All rankings</div> 
<div id="cars lap1" class="ranking-item">Cars rankings</div> 
<div id="cars lap2" class="ranking-item">Cars rankings</div> 

그러나 이것은 작동하지 않습니다 ...

나는 이것이 어떻게 작동하는지 어떻게 생각합니까? 앞으로의 감사

Answer 1

여러 개의 ID를 사용할 수 없습니다. ID는 고유합니다. 클래스를 대신 사용하십시오.

<select> 
     <option value="all">All</option> 
     <option value="cars">Cars</option> 
    </select> 

    <select> 
     <option value="lap1">Lap 1</option> 
     <option value="lap2">Lap 2</option> 
    </select> 

    <div class="ranking-item all lap1">All rankings lap1</div> 
    <div class="ranking-item all lap2">All rankings lap2</div> 
    <div class="ranking-item cars lap1">Cars rankings lap1</div> 
    <div class="ranking-item cars lap2">Cars rankings lap2</div> 

    <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script> 
    <script> 

     $(document).ready(function() { 

      $(".ranking-item").not(":first").hide(); //prevent seeing nothing 

      $("select").change(function() { 

       $('.ranking-item').hide(); 
       var targetClass = $(this).val(); 
       $('.'+targetClass).show(); 

      }) 

     }); 

    </script> 

또한 로직에 대해 생각해보십시오. 선택 필터로 사용하는 경우 모든 필터가 모든 데이터 목록을 필터링 (아니면 다른 사람을 다시 설정)해야합니다

예 :

모두를 선택하면 무릎이 우리를 선택한 경우, 우리는 모든 의 두 가지 요소를 얻을 수 무릎의 두 요소를 얻는다. (모두가 여전히 선택 되더라도)

all과 lap1이 선택되면 오른쪽 목록이 출력되도록 필터를 결합한다.