使用javascript显示相关的下拉列表

我有3个下拉框，其中包含年龄，运动和关系的值，当我们打开网页时，它们的所有元素都被加载。

年龄= [0- 10,10 - 20,20 - 30,30 -40]

Sport = [Soccer, Tennis, Golf, Chess]

关系=[儿子，兄弟，父亲，朋友]

现在，这三个元素都与映射相互关联。例如，20-30岁的人可以是儿子、兄弟或朋友;可以踢足球、打网球或下象棋。

我希望这些下拉框是动态的，即在选择任何下拉框中的任何值时，相关的选项将显示在其他两个下拉框中。我认为不应该是ajax调用，因为所有字段已经加载到客户端。

谁能告诉我如何在HTML中使用javascript(或任何其他方式)?任何帮助都太好了。谢谢。