在网站上显示图像取决于多个收音机组的组合

Question

想象一下您可以购买定制衣服的网上商店。要求用户为他的新T恤选择两种颜色：主要和次要颜色。这由2个radiogroups完成。根据用户选择的颜色，将显示图像，以选定的颜色显示衬衫。

我的问题是非常相似的，所以我会多一点点抽象描述它：

我有2个radiogroups，有4个单选按钮，每个按钮在我的网站：

group 1: A B C D, 
group 2: A B C D 

现在我想在我的网站上展示图片，具体取决于这两个组的组合。

即：用户从组从组1和B选择A 2 - >显示图像1

即：从第1组和A用户slects甲从B组 - >显示图像2

即：用户从B组从第1组和无乙 - >显示图像3

等等...

Primary color: 
<label><input type="radio" name="Color1" value="red" id="Color1_0" />Red</label> 
<label><input type="radio" name="Color1" value="green" id="Color1_1" />Green</label> 
<label><input type="radio" name="Color1" value="blue" id="Color1_2" />Blue</label> 
<label><input type="radio" name="Color1" value="champagne" id="Color1_3" />Champagne</label> 


Secondary color: 
<label><input type="radio" name="Color2" value="red" id="Color2_0" />Red</label> 
<label><input type="radio" name="Color2" value="blue" id="Color2_1" />Blue</label> 
<label><input type="radio" name="Color2" value="purple" id="Color2_2" />Purple</label> 
<label><input type="radio" name="Color2" value="champagne" id="Color2_3" />Champagne</label> 

<img id="customimage" src="images/image1.jpg" /> 

如何做到这一点任何想法？经过思考和谷歌的研究的三天里，我已经没有什么到目前为止:( 也许会需要？ 的Java数组我开放的建议:)

Answer 1

您可以使用jQuery（或类似的框架）在每次更改单选按钮选择时都会在JavaScript中获取事件，并使用新选择的图像的URL更新图像标记（再次使用例如jQuery）。

Changing the image source using jQuery

我会在图像的名称规范（如果你有控制的那个水平），这样就可以形成基于刚才所选择的单选按钮（如衬衫 - 红 - 大型图像名称。 jpg），否则您可以使用Ajax query查找适当的图像URL。