CODEWITHSUNDEEP
javascriptjqueryhtmldropdown
user7767099
user7767099

Reputation: 3

How can I make a dropdown menu show/hide divs that have several classes?

I'm brand-new to coding, I've done days of research on this problem, and I've reached a dead-end.

I have a simple webpage with a series of divs that contain tutor profiles. Each div has multiple classes with all of the subjects that each tutor can tutor. There is overlap. For example, many tutors can tutor Algebra 1, so when someone selects "Algebra 1" in the dropdown, I want only the tutors with "algebra-one" in their div class to show up. When someone selects the "all items" option, I want all the profiles to show again (that's working fine). When the page loads, I want all the profiles to show (working fine, too).

The problem is that the dropdown stops working past the 4th option: Algebra 2. Why? How do I fix this? Is there an easier way to do what I'm trying to do?

THE CODE (I found some code on another Stackoverflow question and modified it up to this point): 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>

Javascript:

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

Upvotes: 0

Views: 49

Answers (2)

gyfh
gyfh

Reputation: 31

In my browser of chrome 53 and edge, it run error in case that option value is biology.

I thought you typed wrong Chinese quotes symbol “” , you'd better check its symbols' encoding at before.

Upvotes: 1

Mihai
Mihai

Reputation: 26784

You messed up your quotes for the lower values,moral is dont copy paste.

“calculus” is not the same as "calculus"

Upvotes: 0

Related Questions