Javascript 带有一些JS的高级HTML表单

想象一下，我有一个虚构的网站，用户可以在其中注册一些课程。假设有三种不同的课程：数学、语言和生物。用户可以在一个表单中选择多个课程

我想有一个表单，用户可以选择是否需要数学、语言或生物课程，然后可以选择他想要的课程

用户将选择他想要的课程类型

<select type="text" name="course">
   <option value="0">mathematics</option>
   <option value="1">languages</option>
   <option value="2">biology</option>
</select>

数学
语言
生物学

根据用户的选择，将有另一个选择与具体的课程，这类。所以，如果用户选择数学，下一个选择将充满数学课程

<select type="text" name="topic">
   <option value="0">algebra</option>
   <option value="0">calculus</option>
   ...
</select>

代数
微积分
...

最后会有一个按钮，它将重新创建此功能，以便用户可以向其应用程序中添加任意数量的课程

你能告诉我怎么做吗？还是有更好的方法，如何做到这一点？

---

谢谢一些可能会有帮助的伪代码/图表

// Display Main Options (Math, Lang, Bio)
<select type="text" name="course">
    <option value="math">mathematics</option>
    <option value="lang">languages</option>
    <option value="bio">biology</option>
</select>

// OnChange of the Main Options, check which option is checked

// Display Secundairy Options menu according to the chosen Main Option
// Note the IDs of these selects and the values of the Main Options
<select type="text" name="subCourse" id="math">
    <option value="SimpleAlg">Simple Algebra</option>
    <option value="AdvAlg">Advanced Algebra</option>
    <option value="xx">...</option>
</select>
// OR
<select type="text" name="subCourse" id="lang">
    <option value="BasEng">Basic English</option>
    <option value="AdvEng">Advanced English</option>
    <option value="xx">...</option>
</select>
// OR
<select type="text" name="subCourse" id="bio">
    <option value="xx">...</option>
</select>

// Display button which adds the selected course to a list
// OnClick on the button, update a shown list of selected courses
<ul id="selectedCourses">
    <li id="BasEng">Basic English [<a onclick="removeCourse()">X</a>]</li>
</ul>

//显示主要选项（数学、语言、生物）
数学
语言
生物学
//更改主选项后，检查选中的选项
//根据选择的主选项显示辅助选项菜单
//注意这些选项的ID和主选项的值
简单代数
高等代数
...
//或
基础英语
高级英语
...
//或
...
//显示按钮，用于将所选课程添加到列表中
//单击按钮，更新显示的所选课程列表

基础英语[X]

它通常被称为级联下拉菜单，谷歌认为，你应该找到很多方法来实现它。我建议在每个选项中添加一个类，并在辅助选择框中显示每个选项的正确类。