<html >
<head>
    <title> new document </title>
</head>
<body>
    <img id="imgShow" src="1.gif">
    <form>
    <select id="sltOpt" name="offerState">
           <option value="1" size="6" style="color:#FF9C00;"> 水晶 </option>
           <option value="2" size="6" style="color:#FF9C00;"> 金属 </option>
           <option value="3" size="6" style="color:#FF9C00;"> 粮食 </option>
           <option value="4" size="6" style="color:#FF9C00;"> 银币 </option>
         </select>
    </form>
</body>
<script type="text/javascript">
<!--
var oImg = document.getElementById("imgShow");
oImg.onerror = function()
{
    this.alt = this.src;
};
var oSlt = document.getElementById("sltOpt");
oSlt.onchange = function()
{
    oImg.src = this.value + ".gif";
};
//-->
</script>
</html>如果页面上有两个这样的
<img id="imgShow2" src="1.gif">
<select id="sltOpt2" name="offerState">
           <option value="1" size="6" style="color:#FF9C00;"> 水晶 </option>
           <option value="2" size="6" style="color:#FF9C00;"> 金属 </option>
           <option value="3" size="6" style="color:#FF9C00;"> 粮食 </option>
           <option value="4" size="6" style="color:#FF9C00;"> 银币 </option>
         </select>
,那怎么实现同样的效果,我想在刚才那段js上id设成一个控件可以随着i来变化,i=1;i++但是不知道怎么改比较好

解决方案 »

  1.   


    <html >
    <head>
        <title> new document </title>
    </head>
    <body>
        <img id="imgShow1" src="1.gif">
        <form>
        <select id="sltOpt1" name="offerState">
               <option value="1" size="6" style="color:#FF9C00;"> 水晶 </option>
               <option value="2" size="6" style="color:#FF9C00;"> 金属 </option>
               <option value="3" size="6" style="color:#FF9C00;"> 粮食 </option>
               <option value="4" size="6" style="color:#FF9C00;"> 银币 </option>
             </select>
    <br>
    <img id="imgShow2" src="1.gif"> 
    <select id="sltOpt2" name="offerState"> 
                <option value="1" size="6" style="color:#FF9C00;"> 水晶  </option> 
                <option value="2" size="6" style="color:#FF9C00;"> 金属  </option> 
                <option value="3" size="6" style="color:#FF9C00;"> 粮食  </option> 
                <option value="4" size="6" style="color:#FF9C00;"> 银币  </option> 
              </select>
        </form>
    </body>
    <script type="text/javascript">
    <!--
    function init(){
    for(var i=1;i<=2;i++){
    var oImg = document.getElementById("imgShow"+i);
    oImg.onerror = function()
    {
        this.alt = this.src;
    };
    var oSlt = document.getElementById("sltOpt"+i);
    oSlt.onchange = function()
    {
        document.getElementById("imgShow"+this.id.substring(6,this.id.length)).src = this.value + ".gif";
    };
    }
    }
    init();
    //-->
    </script>
    </html>
      

  2.   

    我还以为for里面不能在套函数了呢
      

  3.   

    var oImg = document.getElementById("imgShow"+i);//var 最好现在外部定义后再在里边使用