Question

想象一下，我有一个虚构的网站，用户可以签署一些课程。让我们说有3种不同的课程：数学，语言和生物学。用户可以选择一种形式的多门课程。

我希望有一个用户选择的表格，如果他想要数学或语言或生物学课程，然后他可以选择他想要的那个。

用户将选择他想要的课程，

<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>

最后会有一个按钮重新创建，这样用户就可以根据自己的需要为自己的应用程序添加任意数量的课程。

你能给我任何提示怎么做吗？或者有更好的方法，怎么做？感谢

Answer 1

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

// 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>

带有一些JS的高级HTML表单

1 个答案: