I want that when the mouse is over one option in my drop-down list, the background color of the option value on my second mask must be changed

Question

Possible Duplicate:
I want that when the mouse is over one option in my dropdownlist, the background color of the option value on my second mask must be changed

I have 2 dialog mask on my screen

On the fist one I have a drop-down list with different option values.

On the second I have a div table.

I want that when the mouse is over one option in my drop-down list, the background color of the option value on my second mask must be changed and when I leave the background color be restored to white, so that I can know the corresponded feet and meter's value before i selected.

Please look at the screenshot: http://i.imgur.com/W5zAc.jpg

**first mask

Daten.prototype.DepthMask=function(){
var depthref=this;
var feetDiv ="<table id=\"feetDivTab\">"
            +"<tr bgColor =\"99cccc\"><td><label>Char</label></td><td><label>Feet</label></td><td><label>Meter</label></td></tr>"
        +"</table>";
$("#depthEltId").remove();      

var depthDiv="<div id=\"depthEltId\" class=\"depthElt\">"        
    +"<form action=\"\" id=\"depth_Elt\">"
    +"<label><B>Depth</B></label>"
    +"<hr align=\"center\" width=\"100%\" color=\"midnightblue\" size=\"3\">"
    +"<table>"  
        +"<tr><td><SELECT NAME=\"Ankerplatz-Tiefe\" style=\"width:100px\" id=\"Ankerplatz_TiefeId\" ></SELECT></td>&nbsp<td>Ankertiefe</td></tr>"       
    +"</table></form></div>";
    $("#hauptContent").append(depthDiv);
    $.ajax({url: "ComboBoxAusfuellen_Feet.php", success:function(json){ depthref.Comboxval(json, "#Ankerplatz_TiefeId", "value");}});

    $('#depthEltId').dialog({
        resizable: false,                                                                               
        width: 350,
        closeOnEscape: true,
        draggable: false,
        open: function(){           
            $('#toolEltId').dialog("open");
            $.ajax({ url: "ComboBoxAusfuellen_Feet.php", success: function(json){depthref.TooltipMaskFill(json, feetDiv, "#feetDivTab", "value", "FEET", "METERS");}}); 

            $('#Ankerplatz_TiefeId').bind('click', function(){
                var testcombo;
                var testtool;               

                $('#toolEltId tbody').children().children('td:First').each(function(){
                    testtool=$(this).text();
                    $('#Ankerplatz_TiefeId').children().each(function(){}).mouseover(function(){
                            testcombo = $(this).val();                          
                            alert(testtool);    
                        });         
                    });
            });     

            $('#form2Id').dialog("close");
            },
        close: function(){
            $('#toolEltId').dialog("close");
            $('#form2Id').dialog("open");
            },                                                                                              
        buttons: { 
            "Ok": function() {

            try {
                $('#form2Id').dialog("open");
                $(this).remove();
                $(this).dialog("close");
            }catch(e){  alert("Error : "+e);    }       
        }, 
            "Abbrechen": function() {       
                $(this).remove();
                $(this).dialog("close"); 
            } 
        },
    });
};

---

second mask

---

Daten.prototype.TooltipMask=function(tabdiv){
$("#toolEltId").remove();
var toolstart ="<div id=\"toolEltId\" class=\"toolElt\"><form action=\"\" id=\"tool_Elt\">";        
var toolend = "</form></div>";
var toolDiv = toolstart + tabdiv + toolend;
    $("#hauptContent").append(toolDiv);
    $('#toolEltId').dialog({
        resizable: false,                                                                               
        width: 265,
        closeOnEscape: true,
        draggable: false,
        position:[22,45],
        open: function(){},
        close: function(){},        
    });
}

---

Fill autimatical the dropdownlist on the first mask

---

Daten.prototype.Comboxval=function(json, objId, val){
//$("#kontId").remove();
var jsonArray = eval('('+json+')');         
    $(objId).text("");                      
    $(objId).append("<OPTION></OPTION>");                   
    for(var i=0;i < jsonArray.length; i++){ $(objId).append("<OPTION>"+jsonArray[i][val]+"</OPTION>");}
}

---

Fill autimatical the tbody off the second mask

---

Daten.prototype.TooltipMaskFill=function(json, tabdiv, objId, val, feet, meter){
var tooltipMaskFillref = this;
var jsonArr;        
jsonArr = eval('('+json+')');
tooltipMaskFillref.TooltipMask(tabdiv);
for(var i=0; i<jsonArr.length; i++){$(objId).append('<tr><td>'+ jsonArr[i][val] + '</td><td>' + jsonArr[i][feet] + '</td><td>' + jsonArr[i][meter] + '</td></tr');}         
}

---

json value

---

{"value":"A","FEET":"76-OVER","METERS":"23.2-OVER"},{"value":"B","FEET":"71-75","METERS":"21.6-22.9"},
{"value":"C","FEET":"66-70","METERS":"20.1-21.3"},{"value":"D","FEET":"61-65","METERS":"18.6-19.8"},
{"value":"E","FEET":"56-60","METERS":"17.1-18.2"},{"value":"F","FEET":"51-55","METERS":"15.5-16.8"},
{"value":"G","FEET":"46-50","METERS":"14.0-15.2"},{"value":"H","FEET":"41-45","METERS":"12.5-13.7"},
{"value":"J","FEET":"36-40","METERS":"11.0-12.2"},{"value":"K","FEET":"31-35","METERS":"9.4-10.7"},
{"value":"L","FEET":"26-30","METERS":"7.9-9.1"},{"value":"M","FEET":"21-25","METERS":"6.4-7.6"},
{"value":"N","FEET":"16-20","METERS":"4.9-6.1"},{"value":"O","FEET":"11-15","METERS":"3.4-4.6"},
{"value":"P","FEET":"6-10","METERS":"1.8-3.0"},
{"value":"Q","FEET":"0-5","METERS":"0-1.5"}