Buongiorno ragazzi!

Sto lavorando un form che comprende 2 script, uno che cambia l'immagine a seconda della prima option select e l'altro determina i valori della seconda option select in base voce scelta nella prima che cambia anche l'immagine.

Il codice e questo:

Codice PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html><head> 
<script type="text/javascript"> 
var game = new Object()
game["game1"] = [{value:"1", text:"1"},
                      {value:"2", text:"2"},
                      {value:"3", text:"3"},];
game["game2"] = [{value:"12", text:"12"},
                      {value:"2", text:"2"},
                      {value:"3", text:"3"},];
 
function setGames(chooser) {
    var newElem;
    var where = (navigator.appName == "Microsoft Internet Explorer") ? -1 : null;
    var selectChooser = chooser.form.elements["select"];
    while (selectChooser.options.length) {
        selectChooser.remove(0);
    }
    var choice = chooser.options[chooser.selectedIndex].value;
    var db = game[choice];
    newElem = document.createElement("option");
    newElem.text = "Seleziona";
    newElem.value = "";
    selectChooser.add(newElem, where);
    if (choice != "") {
        for (var i = 0; i < db.length; i++) {
            newElem = document.createElement("option");
            newElem.text = db[i].text;
            newElem.value = db[i].value;
            selectChooser.add(newElem, where);
        }
    }
}
 
 
</script>
<script language="JavaScript" type="text/JavaScript"> 
function preloadImgs(args) { 
    for(var n=0;n<arguments.length;n++) { 
        preloadImg(arguments[n]); 
    }     
    //funzione che precarica un immagine 
    function preloadImg(game1) { 
        var temp=new Image(); 
        temp.src=cod2; 
    } 
} 
function _removeChild(parent,child){ 
    if(child != null){ 
        parent.removeChild(child); 
    } 
}; 
function changeImg(el){ 
    var ext= '.png'; 
    var target= document.getElementById("target"); 
    if(!target){return;} 
     var optionValue = el.options[el.selectedIndex].value; 
    var currentImage= optionValue.concat(ext); 
    var img = document.createElement("img"); 
    img.src= currentImage; 
    var tmp= target.getElementsByTagName('img').item(0); 
    _removeChild(target,tmp); 
    target.appendChild(img); 
} 
window.onload = function(){ 
    preloadImgs('game1.png','game2.png','game3.png'); 
    var sel = document.getElementById("gametype"); 
    sel.onchange=function(){ 
        changeImg(sel);  
    } 
} 
</script> 

</head> 
 
 
<body> 
<div align="center">
<div id="target">[img]game1.png[/img]</div> 
<form name="form"> 
Game: 
<select name="game" onchange="setGames(this)" id="gametype"> 
<option value="game1" selected="selected">Seleziona</option> 
<option value="game1">Game1<option> 
<option value="game2">Game2</option> 
<option value="game3">Game3</option> 
</select> 
<select name="select"> 
<option value="" selected="selected">Seleziona</option> 
</select> 
</form> 
</div> 
</body></html> 
Separatamente funzionano bene ma se gli unisco cambia solo l'immagine.
Idee su come sistemare?