Image 根据多个广播组的组合在网站上显示图像

想象一下，你可以在一家网上商店里购买定制服装。用户被要求为他的新t恤选择两种颜色：原色和副色。这由2个放射组完成。根据用户选择的颜色，将显示一个图像，以选定的颜色显示衬衫

我的问题非常相似，因此我将更抽象地描述它：

我有两个RadioGroup，在我的网站上各有4个单选按钮：

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

现在，我想在我的网站上显示一个图像，这取决于这两个组的组合

i、 e:用户从组1中选择A，从组2中选择B-->显示图像1

i、 e.：用户从组1中选择A，从组B中选择A-->显示图像2

i、 e.：用户从组1中选择B，从组B-->显示图像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数组？？ 我乐于接受建议：）

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

我会对图像的名称进行标准化（如果您具有该级别的控制），这样您就可以仅基于选定的单选按钮（例如Shirts Red Large.jpg）来形成图像名称，否则您可以使用