选择商品不同的版本和不同的颜色，显示不同的价格。是通过什么技术实现的呢？

选择后，页面不跳转（京东商城是跳转的）。不知道通过JS能否实现。我想大概是把产品的价格、版本、颜色作为一个数组，点击选择不同的版本和颜色后，就显示不同的价格，但是我写不出JS代码。

如果哪位能提供类似的代码，我再最加100分。先谢过~~

效果图如下（请注意红色字体部分）：

给你写了一个：
<style type="text/css">
<!--
.s1 {border:#ffffff 1px solid;}
.s2 {border:#ff0000 1px solid;}
-->
</style>
<script language="javascript">
var ver,col;
var versions=["欧版","港版"];
var colors=["黑色","白色"];
function $(eid){
return document.getElementById(eid);
}
function selectver(n){
ver=n;
for(var i=0;i<2;i++){
if(i==n){
$("v"+i).className="s2";
}else{
$("v"+i).className="s1";
}
}
result();
}
function selectcol(n){
col=n;
for(var i=0;i<2;i++){
if(i==n){
$("c"+i).className="s2";
}else{
$("c"+i).className="s1";
}
}
result();
}
function result(){
var p;
tmp="";
if(ver>=0){tmp=versions[ver]+" ";}else{ver=0;}
if(col>=0){tmp+=colors[col];}else{col=0;}
$("select").innerHTML=tmp;
if((ver==0)&&(col==0)){p=1800;}
else if((ver==0)&&(col==1)){p=2000;}
else if((ver==1)&&(col==0)){p=1400;}
else if((ver==1)&&(col==1)){p=1600;}
$("price").innerHTML="￥"+p;
}
</script>
<table width=400 border=1 id="tbl2">
<tr>
<td>价格</td>
<td id="price">￥0</td>
</tr>
<tr>
<td>版本</td>
<td id="version"></td>
</tr>
<tr>
<td>颜色</td>
<td id="color"></td>
</tr>
<tr>
<td>选择</td>
<td id="select">无</td>
</tr>
</table>
<script language="javascript">
var tmp="";
for(var i=0;i<versions.length;i++){
tmp+="<span id=\"v"+i+"\" class=\"s1\" onclick=\"selectver("+i+");\">"+versions[i]+"</span> ";
}
$("version").innerHTML=tmp;
tmp="";
for(var i=0;i<colors.length;i++){
tmp+="<span id=\"c"+i+"\" class=\"s1\" onclick=\"selectcol("+i+");\">"+colors[i]+"</span> ";
}
$("color").innerHTML=tmp;
</script>