Javascript 更新/保存完全由JS中的其他下拉菜单填充的动态下拉菜单的值

我希望能够制作一系列的下拉菜单，它们本身就是由下拉菜单填充的。当用户更新一个基本选择时，我只想在已选择的选择已更改的情况下更改辅助选择。比如,

"Base menus" (all dropdown menus)

Menu 1 options: "red", "blue", "green"
Menu 2 options: "House", "Shed", "Complex"
Menu 3 options: "small", "tiny", "Huge", "normal"
Menu 4 options: "expensive", "cheap", "average"

"Secondary Menus"
Menu 5 options: "Result of Menu 1", "Result of Menu 2", Result of Menu 3", Result of Menu 4";
Menu 6 options (Same as menu 5)
Menu 7 options (same as menu 5)

然后我希望用户在菜单1-4中选择他们想要的任何内容，然后在菜单5到7中选择他们想要的内容。然后，当他们更改前4个菜单中任何一个菜单中的选择时，该更改会根据需要通过菜单5到7动态填充（作为新的下拉选择选项，并在选择该选项时替换该选项）

这看起来应该很容易，但我对html和js非常陌生，我仍然在学习很多代码的工作原理（我以前用其他语言编程过，但这已经足够不同了，所以结构对我来说还是陌生的）。我可以让上面的工作，但它的暴力强迫html，每当一个基本选项是“更新”，它重置所有的二级菜单默认。。。因此，我真的希望能够将二级菜单选项设置为“菜单1-4中的任意选项”，而不是硬编码，并在每次“基本菜单”更改时运行一些脚本来重新填充选项（这就是我目前的做法）

谁能给我指出正确的方向吗？我甚至不知道该去哪里查找，或者查找什么语法/函数，或者用谷歌搜索有用的信息

---

顺便说一句，我想尝试一下CSS，但我真的一点也不理解那个代码；到目前为止，我对js和html掌握得很好，还没有真正破解CSS。

我认为，除了现在这样做之外，您无法单独使用javascript/jQuery动态填充/更新辅助菜单

但是，您可以使用诸如Angular、React、Vue等javascript框架实现这一点，在这些框架中，您可以使用模型/数据/道具来构建辅助菜单。当主菜单中的选项更新时，您可以更新模型/数据/道具，它将自动更新辅助菜单