Ajax browser and drop down menu problem

[blckspder]

Hello,
I have a form that has 2 drop down menus. when you select an item from the first drop down it populates the the second drop down depending on what you selected. It works at first... but if you try to select an option that you had is higher on the list it will not populate... for example... say my 2 options are electronics and medical.. if I select medical the second drop down menu populates... if I decide to change to electronics the second drop down does not repopulate to the choices for electronics. does any one know what I can do to fix that?

my second problem is that my Ajax will not work in Firefox.

here is my code:

<script language="javascript" type="text/javascript">
var XMLHttpRequestObject = false;
try{
    XMLHttpRequestObject = new ActiveXObject("MSXML2.XMLHTTP");
    } catch(exception1) {
        try{
            XMLHttpRequestObject = new ActiveXObject("Microsoft");
            } catch(exception2) {
                XMLHttpRequestObject = false;
                }
        } 

if(XMLHttpRequestObject && window.XMLHttpRequest) {
    XMLHttpRequestObject = new XMLHttpRequest();
    }
    
function getValue(cat,id) {
    getSub(cat,id);
    } 
    
function getSub(cat,id) {
    if(XMLHttpRequestObject) {
        if(cat == "Electronics") {
            XMLHttpRequestObject.open("GET","electronics.xml",true);
            }
        if(cat == "Medical") {
            XMLHttpRequestObject.open("GET","medical.xml",true);
            }
        alert(cat);
        var subId = id;
        
        XMLHttpRequestObject.onreadystatechange = function() {
            if(XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
                var xmlDocument = XMLHttpRequestObject.responseXML;
                
                var subCategory = xmlDocument.getElementsByTagName("subs");
                listSubs(subCategory,subId);
                }
            }
        XMLHttpRequestObject.send(null);
        }
    }
    
function listSubs(subCategory,subId) {
    var loopIndex;
    /*if(subId == "mainCat1") {
        var subCat = "subCat1";
        }*/
    var selectControl = document.getElementById("subCat1");
    
    for(loopIndex=0;loopIndex<subCategory.length;loopIndex++) {
        selectControl.options[loopIndex] = new
            Option(subCategory[loopIndex].firstChild.data);
        }
    }
</script> 

I hope I explained things well enough, thanks for your help.

[blckspder]

I figured it out... I ended up writing a function that would clear the list every time a new selection was made..

However I am still having problems getting the Ajax to work in Firefox..

here is my new code

<script language="javascript" type="text/javascript">
var XMLHttpRequestObject = false;
try{
    XMLHttpRequestObject = new ActiveXObject("MSXML2.XMLHTTP");
    } catch(exception1) {
        try{
            XMLHttpRequestObject = new ActiveXObject("Microsoft");
            } catch(exception2) {
                XMLHttpRequestObject = false;
                }
        } 

if(XMLHttpRequestObject && window.XMLHttpRequest) {
    XMLHttpRequestObject = new XMLHttpRequest();
    }
    
function getValue(cat,id) {
    clearList(id);
    getSub(cat,id);
    } 
    
function getSub(cat,id) {
    if(XMLHttpRequestObject) {
        if(cat == "Electronics") {
            XMLHttpRequestObject.open("GET","electronics.xml",true);
            }
        if(cat == "Medical") {
            XMLHttpRequestObject.open("GET","medical.xml",true);
            }
        if(cat == "Industrial") {
            XMLHttpRequestObject.open("GET","industrial.xml",true);
            }
        if(cat == "Nanotechnology") {
            XMLHttpRequestObject.open("GET","nano.xml",true);
            }
        alert(cat);
        var subId = id;
        
        XMLHttpRequestObject.onreadystatechange = function() {
            if(XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
                var xmlDocument = XMLHttpRequestObject.responseXML;
                
                var subCategory = xmlDocument.getElementsByTagName("subs");
                listSubs(subCategory,subId);
                }
            }
        XMLHttpRequestObject.send(null);
        }
    }
    
function listSubs(subCategory,subId) {
    var loopIndex;
    var subCat;
    if(subId == "mainCat1") {
        subCat = "subCat1";
        }
    if(subId == "mainCat2") {
        subCat = "subCat2";
        }
    var selectControl = document.getElementById(subCat);
    
    for(loopIndex=0;loopIndex<subCategory.length;loopIndex++) {
        selectControl.options[loopIndex] = new
            Option(subCategory[loopIndex].firstChild.data);
        }
    }
    
function clearList(id) {
    var clearCat;
    if(id == "mainCat1") {
        clearCat = "subCat1";
        }
    if(id == "mainCat2") {
        clearCat = "subCat2";
        }
    var len = document.getElementById(clearCat).options.length
      for(i = 0; i < len; i++) {
        document.getElementById(clearCat).options[0] = null;
        }
    }
</script> 

Please let me know about the Firefox browser thanks for your help.