递归下拉图像选择?

时间:2011-03-19 21:11:05

标签: javascript

我正在尝试创建一个允许自定义产品的产品页面布局。基本上,每次连续下拉的一系列下拉都会根据到目前为止所选择的内容填充选项。像这样:

下拉1:产品变体(用户选择productvariationb,下拉2然后填充productvariationb的选项)。

下拉2:产品颜色(用户选择productvariationb在下拉列表中1,现在他们在下拉列表中选择“棕色”2,图像应更改为产品变体的棕色版本b)。

依此类推,每次根据所选内容更改图像(和填充选项)。

我可以用JS做这个吗?有没有人知道我可以编辑的类似脚本,或者我需要研究JS的哪些功能来完成这个?

2 个答案:

答案 0 :(得分:1)

我在这里告诉你:http://jsfiddle.net/moeishaa/H9fF2/

它正在使用jQuery。玩它并告诉我这是否有帮助: - )

我知道它看起来非常静态,但您可以在页面加载时渲染下拉列表并填充选项对象。我相信你可以找到插件和插件。这是一个非常短的代码,可以自定义。

答案 1 :(得分:0)

我认为示例代码的最佳资源是在创建可扩展菜单(更具体地说是模仿文件夹结构的菜单)时查看一些JavaScript或JQuery示例。他们通常通过装饰无序列表来运作。

您可以创建静态无序列表,并根据您悬停的项目更改图像。或者,当您将鼠标悬停在不同级别上时,可以使用某些AJAX动态填充列表的其他部分。这两个很可能很容易用JQuery完成。这是一个包含一些菜单示例的页面,可能会给您一些想法:

JQuery Navigation Menus