从下拉菜单中选择元素后，如何使其显示？

Question

我有一个下拉菜单，其中列出了学校科目。我还为每个科目的考试日期设置了倒数计时器（许多科目共享一个日期）。我想让它在用户选择主题时出现正确的倒数计时器而不刷新页面。

现在我使用 PHP 进行了这项工作：我有 9 个不同的 JavaScript 倒数计时器（我使用了 w3schools 的本教程）和 9 个单独的 PHP 文件，如下所示：

 $newSubject = $_GET["chooseSubject"];

if ($newSubject == "Math" OR $newSubject == "Chemistry") {

echo '<p id="subjectSet1"></p>';

echo '<p class="dates">October 16. 2019 klo 9:00</p>';

}

我有一个按钮重定向到一个页面，然后显示正确的倒数计时器。

但是，我希望实现这样的目标：

https://yle.fi/aihe/artikkeli/2019/05/15/ylioppilaskokeiden-pisterajat-kevat-2019

在“Ylioppilaskokeiden pisterajat, kevät 2019”下有一个选择菜单，当您选择一个主题时，它会自动显示正确的表格。

Answer 1

这就是项目设计发挥作用的地方。如果你希望你的下拉列表很小，你可以简单地在页面加载时呈现所有内容，然后使用 JS/CSS 在下拉列表更改时显示/隐藏每个内容块。或者，如果您期望更大的数据集，这可能会影响您的页面加载时间，并使浏览器渲染数据的时间更长（即使它位于隐藏元素中）。在这种情况下，我会考虑使用 AJAX 并在您单击某个部分时加载内容。这稍微复杂一些，但是；一个很好的学习练习从长远来看更有效率编辑：如果你想走秀/隐藏路线。这很简单，使用 jQuery。您可以选择几个选项，但我建议先切换 -请参阅此处的文档对于 AJAX，这将需要更多的阅读。我还建议使用 jQuery 的ajax函数 -请参阅此处的文档