Populating dropdown lists using Ajax

Total noob to ajax here, how close am I with this syntax? I want the second dropdown box to be dependent on the first drop down box. I know this can't be the easiest way to solve this problem so any help is appreciated. acura.txt is a text file with markup to make another dropdown list. Thanks for your help everyone!

JavaScript:

function loadXMLDoc() {
    if (window.XMLHttpRequest) { // code开发者_开发技巧 for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("acura").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", "acura.txt", true);
    xmlhttp.send();
}

HTML:

<select id="stateinjured">
    <option selected="selected">Select your state</option>
    <option id="acura" onClick="loadMXLDOC">Acura</option>
    <option id="bmw">BMW</option>
    <option id="audi">Audi</option>
    <option id="benz">Benz</option>
</select>

It's not going to work to stuff a <select> tag (with its own <option> contents, presumably) into the content of an <option> tag. That's what your code will attempt to do now.

This code here:

if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
  document.getElementById("acura").innerHTML=xmlhttp.responseText;
  }

The element whose "id" value is "acura" is one of the <option> tags in the <select> on the page. Thus, if that response text is just a <select>, it's going to go in the wrong place.

Maybe you just want another <span> on the page, or something; it depends on what it's supposed to look like.

Another thing: you don't want to pick up the "click" event on the <option>. It's possible for an option to be selected (by the user) without any "clicks" taking place. Probably you should track the "change" event on the <select> tag, and check the value in the handler.