여러 클래스가있는 div를 표시/숨기기 드롭 다운 메뉴를 만들려면 어떻게해야합니까?

나는 코딩에있어 아주 새로운데, 나는이 문제에 대한 연구를 해봤 다. 막 다른 골목에 다다 랐다.여러 클래스가있는 div를 표시/숨기기 드롭 다운 메뉴를 만들려면 어떻게해야합니까?

튜터 프로필이 포함 된 일련의 div가있는 간단한 웹 페이지가 있습니다. 각 학급마다 여러 과목이 있으며, 각 과외 교사는 교사와 함께 할 수 있습니다. 중복이 있습니다. 예를 들어 많은 교사는 대수 1을 튜터 할 수 있습니다. 따라서 누군가가 드롭 다운에서 "대수 1"을 선택하면 해당 div 클래스의 "대수 1"을 가진 교사 만 나타나기를 바랍니다. 누군가가 "모든 항목"옵션을 선택하면 모든 프로필이 다시 표시되기를 바랍니다 (정상적으로 작동합니다). 페이지가로드되면 모든 프로필이 표시됩니다 (잘 작동 함).

문제는 드롭 다운이 4 번째 옵션 인 대수학 2를 지나서 작동을 멈추는 것입니다. 이유는 무엇입니까? 이 문제를 어떻게 해결할 수 있습니까? 내가하려는 일을하는 더 쉬운 방법이 있습니까?

하는 코드 (I 다른 유래 질문에 몇 가지 코드를 발견하고이 점에 변경) : https://jsfiddle.net/hyptastic/d90kdmgg/

<select id="classes" multiple="multiple"> 
<option value="classes">all items</option> 
<option value="sixth-grade-math">6th Grade Math</option> 
<option value="algebra-one">Algebra 1</option> 
<option value="algebra-two">Algebra 2</option> 
<option value=“biology”>Biology</option> 
<option value=“calculus”>Calculus</option> 
<option value=“chemistry”>Chemistry</option> 
<option value=“english”>English</option> 
<option value=“geometry”>Geometry</option> 
<option value=“government-economics”>Government/Economics</option> 
<option value=“history”>History</option> 
<option value=“homework-help”>Homework Help</option> 
<option value=“physical-science”>Physical Science</option> 
<option value=“physics”>Physics</option> 
<option value=“pre-algebra”>Pre-Algebra</option> 
<option value=“pre-calculus”>Pre-Calculus</option> 
<option value=“spanish”>Spanish</option> 
<option value=“statistics”>Statistics</option> 
<option value=“test-prep”>Test Prep</option> 
</select> 

<div class="classes sixth-grade-math">Tutor 1</div> 

<div class="classes sixth-grade-math algebra-one">Tutor 2</div> 

<div class="classes sixth-grade-math algebra-one algebra-two">Tutor 3</div> 

<div class="classes sixth-grade-math algebra-one algebra-two biology">Tutor 4</div> 

<div class="classes biology">Tutor 5</div> 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

자바 스크립트 : 당신이 당신의 따옴표를 엉망

$('#classes').on('change', function() { 
var number = $(this).val(); 
var classNames = '.' + number.join('.'); 
$(".classes").hide().filter(classNames).show(); 
});

출처

2017-03-25 user7767099