dynamic filling of drop down with js&ajax. beginner. need some help

[panchosansa]

I have a proble with dynamically loading the values of one drop down based on the choice that was selected in another drop down. This is my first thing with AJAX so I would really appreciate if anyone would bother to help me out.

These are the two forms:

<form action="">
<div id="select_top" class="select_top">
<label for="one">Label:</label>
<select id="county" class="couty" onchange="updateInfo();">
<option></option>
<option id="BGMountains" value="BGMountains">Bulgarian Mountains</option>
<option id="Seaside" value="Seaside">Seaside</option>
<option id="BigCities" value="BigCities">BigCities</option>
<option id="CentralBulgaria" value="CentralBulgaria">CentralBulgaria</option>
</select><br />
</div>
</form>

<form action="">
<div id="select_middle" class="select_middle">
<label for="area">Area:</label>
<select id="area" class="area">
</select>
</div>
</form>

I'm using JSON to store the potential data for the second dropdown:

var AreaOptions = { "BulgarinaMountains": [
{"option1": "Sofia", "option2": "Veliko Tarnovo", "option3": "Vidin"}
],
"Seaside": [
{"option1": "Nesebur", "option2": "Slunchev Briag", "option3": "Sozopol"}
],
"BigCities": [
{"option1": "Pamporovo", "option2": "Borovec", "option3": "Bansko"}
],
"CentralBulgaria": [
{"option1": "Plovdiv", "option2": "Rozovota Dolina", "option3": "Gabrovo"}
]
}

And here is the AJAX part in which I have two problems.The first one is with construncting the url(from the things I read I couldn't really understand how to do it in this case) and the second one is the dinamic fill of the 2nd dropdown. Here is my source:
var request = false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}

if (!request)
alert("Error initializing XMLHttpRequest!");

function getCountyInfo()
{
var url = ;
request.open("GET", url, true);
request.onreadystatechange = updateInfo;
request.send(null);
}

function updateInfo()
{
var area = document.getElementById("area");
var countySelected = eval('(' + req.responseText + ')');
/*how to fill the second dropdown using the countySelected*/
}
I tried
area.options[1]= new Option('AreaOption.countySelected[0].option1', ''); but it only displayed the above text as a string.

Can anyone please help me?

[supermoi]

You'd have to somehow parse the text returned from the query, probably using the .split() command, and then loop through all elements of this string and create and <option> for each of them.