js数组联级与显示问题

在陈容里有联盟，和部落。单击联盟时，在角色里显示人类，矮人。
单击部落时，在角色里显示兽人，牛头人。
在角色里，有人类，矮人。单击人类时，对应的显示是人类的图片，但单击矮人时，对应的显示是矮人的图片。我能实现，单击联盟，在角色里显示对应的功能，但是，不能实现图片对应显示的功能。请高手教教我。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

补充代码：<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">function arrayShow(){
var arrayM=new Array();
arrayM["联盟"]=['人类','暗夜精灵','矮人','侏儒'];
arrayM["部落"]=['兽人','牛头人','忙灵','巨魔'];
  var nameM=document.getElementById("select2").value;
   var option;
  document.getElementById("select").options.length=0;

  for(var j in arrayM[nameM]){
  option =new Option(arrayM[nameM][j],arrayM[nameM][j]);
   document.getElementById("select").options.add(option);
  }

}

function picShow(){
var zhi= document.getElementById("select").value;
if(zhi=="人类"){
document.getElementById("pic3").style.display="block";
document.getElementById("pic1").style.display="none";

}
if(zhi=="兽人"){
document.getElementById("pic3").style.display="none";
     document.getElementById("pic1").style.display="block";

}

}
</script></head><body>
<form id="form1" name="form1" method="post" action="">
  <table width="599" height="155" border="1" align="center" >
    <tr>
      <td width="275" height="32" align="center" >魔兽世界的八大种族（图）</td>
    </tr>
    <tr>
      <td height="43"  align="center">陈容选择：
        <select name="select2" id="select2" onChange="arrayShow()">
          <option>--请选择你的陈容--</option>
          <option value="联盟">联盟</option>
          <option value="部落">部落</option>
      </select></td>
    </tr>
    <tr>
      <td height="39"  align="center">角色选择：
      <label>
        <select name="select" id="select" onChange="picShow()">
          <option>--请选择一个种族--</option>
        </select>
      </label></td>
    </tr>
    <tr>
      <td>
      <div align="center">
    <img   style=" display:block"  id="pic1" src="第七章作业素材/理论/作业3/images/dwarves-small.jpg" width="250" height="234">
    <img   style=" display:none"  id="pic2" src="第七章作业素材/理论/作业3/images/gnomes-small.jpg" width="250" height="234">
    <img   style=" display:none"  id="pic3" src="第七章作业素材/理论/作业3/images/humans-small.jpg" width="250" height="234">
</div>
</td>
    </tr>
  </table>
</form>
</body>
</html>
角色变化的时候使用onpropertyChange事件,替换onchange事件.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">function arrayShow(){
    var arrayM=new Array();
    arrayM["联盟"]=['人类','暗夜精灵','矮人','侏儒'];
    arrayM["部落"]=['兽人','牛头人','忙灵','巨魔'];
  var nameM=document.getElementById("select2").value;
   var option;
  document.getElementById("select").options.length=0;

  for(var j in arrayM[nameM]){
      option =new Option(arrayM[nameM][j],arrayM[nameM][j]);
       document.getElementById("select").options.add(option);
      }

    }

    function picShow(){
        var zhi= document.getElementById("select").value;
        if(zhi=="人类"){
            document.images['previewimg'].src = "image/大眼绿豆/2.gif"
            }
if(zhi=="暗夜精灵"){
            document.images['previewimg'].src = "image/大眼绿豆/3.gif"
            }
if(zhi=="矮人"){
            document.images['previewimg'].src = "image/大眼绿豆/4.gif"
            }
if(zhi=="侏儒"){
            document.images['previewimg'].src = "image/大眼绿豆/5.gif"
            }
            if(zhi=="兽人"){
              document.images['previewimg'].src = "image/大眼绿豆/333.gif"

                }

        }
</script></head><body>
<form id="form1" name="form1" method="post" action="">
  <table width="599" height="155" border="1" align="center" >
    <tr>
      <td width="275" height="32" align="center" >魔兽世界的八大种族（图）</td>
    </tr>
    <tr>
      <td height="43"  align="center">陈容选择：
        <select name="select2" id="select2" onChange="arrayShow()">
          <option>--请选择你的陈容--</option>
          <option value="联盟">联盟</option>
          <option value="部落">部落</option>
      </select></td>
    </tr>
    <tr>
      <td height="39"  align="center">角色选择：
      <label>
        <select name="select" id="select" onChange="picShow()">
          <option>--请选择一个种族--</option>
        </select>
      </label></td>
    </tr>
    <tr>
      <td>
      <div align="center">
   <img   border="0"   id="previewimg"   name=previewimg   src="">
</div>
</td>
    </tr>
  </table>
</form>
</body>
</html>非常笨的方法  你把图片地址换一下  我试过可以显示对于图片
但是是很笨的办法期待高手解决
在我本地的图片，IE7和firefox3.5都没问题<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">function arrayShow(){
    var arrayM=new Array();
    arrayM["联盟"]=['人类','暗夜精灵','矮人','侏儒'];
    arrayM["部落"]=['兽人','牛头人','忙灵','巨魔'];
  var nameM=document.getElementById("select2").value;
   var option;
  document.getElementById("selectjs").options.length=0;

  for(var j in arrayM[nameM]){
      option =new Option(arrayM[nameM][j],arrayM[nameM][j]);
       document.getElementById("selectjs").options.add(option);
      }

    }

    function picShow(){
        var zhi= document.getElementById("selectjs").value;
        if(zhi=="人类"){
            document.getElementById('previewimg').src = "file:///e:\\gif1.gif";
            }
            if(zhi=="暗夜精灵"){
            document.getElementById('previewimg').src = "file:///e:\\gif2.gif";
            }
            if(zhi=="矮人"){
            document.getElementById('previewimg').src = "file:///e:\\gif3.gif";
            }
            if(zhi=="侏儒"){
            document.getElementById('previewimg').src = "http://www.xxyy123.cn/attachment/image/大眼绿豆/5.gif";
            }
            if(zhi=="兽人"){
              document.getElementById('previewimg').src = "http://www.xxyy123.cn/attachment/image/大眼绿豆/333.gif";

                }

        }
</script></head><body>
<form id="form1" name="form1" method="post" action="">
  <table width="599" height="155" border="1" align="center" >
    <tr>
      <td width="275" height="32" align="center" >魔兽世界的八大种族（图）</td>
    </tr>
    <tr>
      <td height="43"  align="center">陈容选择：
        <select name="select2" id="select2" onChange="arrayShow()">
          <option>--请选择你的陈容--</option>
          <option value="联盟">联盟</option>
          <option value="部落">部落</option>
      </select></td>
    </tr>
    <tr>
      <td height="39"  align="center">角色选择：
      <label>
        <select name="select" id="selectjs" onChange="picShow()">
          <option>--请选择一个种族--</option>
        </select>
      </label></td>
    </tr>
    <tr>
      <td>
      <div align="center">
   <img   border="0"   id="previewimg"   name=previewimg   src="">
</div>
</td>
    </tr>
  </table>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">function arrayShow(){
    var arrayM=new Array();
    arrayM["联盟"]=['人类','暗夜精灵','矮人','侏儒'];
    arrayM["部落"]=['兽人','牛头人','忙灵','巨魔'];
  var nameM=document.getElementById("select2").value;
   var option;
  document.getElementById("select").options.length=0;

  for(var j in arrayM[nameM]){
      option =new Option(arrayM[nameM][j],arrayM[nameM][j]);
       document.getElementById("select").options.add(option);
      }

    }

    function picShow(){
        var zhi= document.getElementById("select").value; document.getElementById("previewimg").src = "image/大眼绿豆/"+zhi+".gif";
        }
</script></head><body>
<form id="form1" name="form1" method="post" action="">
  <table width="599" height="155" border="1" align="center" >
    <tr>
      <td width="275" height="32" align="center" >魔兽世界的八大种族（图）</td>
    </tr>
    <tr>
      <td height="43"  align="center">陈容选择：
        <select name="select2" id="select2" onChange="arrayShow()">
          <option>--请选择你的陈容--</option>
          <option value="联盟">联盟</option>
          <option value="部落">部落</option>
      </select></td>
    </tr>
    <tr>
      <td height="39"  align="center">角色选择：
      <label>
        <select name="select" id="select" onChange="picShow()">
          <option>--请选择一个种族--</option>
        </select>
      </label></td>
    </tr>
    <tr>
      <td>
      <div align="center">
   <img   border="0"   id="previewimg"   name=previewimg   src="">
</div>
</td>
    </tr>
  </table>
</form>
</body>
</html>
这样的话，代码是少了，但是图片名称必须和所选种族的名称一致，没思路了，望高手解答
function arrayShow(){
    var arrayM=new Array();
    arrayM["联盟"]=['人类','暗夜精灵','矮人','侏儒'];
    arrayM["部落"]=['兽人','牛头人','忙灵','巨魔'];
  var nameM=document.getElementById("select2").value;
   var option;
  document.getElementById("select").options.length=0;

  for(var j in arrayM[nameM]){
      option =new Option(arrayM[nameM][j],arrayM[nameM][j]);
       document.getElementById("select").options.add(option);
      }

    }

    function picShow(){
        var zhi= document.getElementById("select").value;
        switch(zhi)
{
case "":
document.getElementById('previewimg').src = "file:///e:\\gif1.gif";
break;}
        }
</script>