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

时间:2018-06-02 01:34:33

标签: javascript html dynamic drop-down-menu

我希望能够制作一系列下拉菜单,这些菜单本身由下拉菜单填充。当用户更新其中一个基本选择时,我只想更改已选择的选择时更改辅助选择。例如;

"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和#34中选择什么;而不是硬编码并运行一些脚本以在每次基本菜单之一时重新填充选项"被改变了(这就是我目前的做法)。

有人能指出我正确的方向吗?我甚至不确定在哪里查找,或查找哪些语法/功能或Google以查找有用的信息...

顺便说一句,我是尝试CSS的游戏,但我根本不理解这些代码;到目前为止,我对js和html有一个合理的把握,还没有真正破解CSS。

1 个答案:

答案 0 :(得分:0)

我不认为你可以使用javascript / jQuery动态填充/更新你的二级菜单,而不是你现在的方式。

但是你可以使用像Angular,React,Vue这样的javascript框架来实现这一点,你可以使用它来构建二级菜单的模型/数据/道具。当您在主菜单中更新选择时,您可以更新模型/数据/道具,它将自动更新辅助菜单。