Question

我对编码很陌生，我已经对这个问题进行了几天的研究，但我已经走到了尽头。

我有一个简单的网页，其中包含一系列包含教师资料的div。每个div都有多个班级，每个班级都有导师可以辅导的所有科目。有重叠。例如，许多导师可以辅导代数1，所以当有人在下拉列表中选择“代数1”时，我只想让他们的div类中带有“代数一”的导师出现。当有人选择“所有项目”选项时，我希望所有配置文件再次显示（工作正常）。当页面加载时，我希望显示所有配置文件（工作正常）。

问题是下拉菜单停止工作超过第四个选项：代数2.为什么？我该如何解决？有没有更简单的方法来做我想做的事情？

代码（我在另一个Stackoverflow问题上找到了一些代码并将其修改到此时）：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();
});

Answer 1

在我的chrome 53和edge浏览器中，如果选项值为biology，则会运行错误。

我认为您键入错误的中文引号符号“”，您最好先检查其符号的编码。

Answer 2

你搞砸了低价值的引语，道德是不要复制粘贴。

“calculus”与"calculus"

不同

如何让下拉菜单显示/隐藏包含多个类的div？

2 个答案: