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.
精彩评论