Trouble with Ajax (creating a <select> dynamically

I'm new to Ajax, and Im just loving it. Really nice.

but i stucked in this <select> thing, so wh开发者_JAVA技巧ats the problem? I have a js function that allows the user to Register a new product dynamically.. So when he is in the product area, theres a button that when clicked, just creates a FORM, where he can add a new product. By now, im doing well, but, i got this field CITY.

So, I need no generate a <select> with all the cities I have on my mySql table.

The first thing Im doing is accessing the database and geting the quantity of cities, I think Im making this confuse so...

cities = document.createElement('select');
cities.setAttribute('class','coolButton');
Cities = new Array();
ajax = new Ajax();
ajax.doGet('pegacidade.php?act=1',GiveCitiesQty);

This works just fine, I get the quantity of cities.

GiveCitiesQty = function (str) {
    ajax.doGet('pegacidade.php?act=2&id='+j,PegaNomeCidade);
    //Cities[i] = document.createElement('option');
    //Cities[i].setAttribute('value',i);
    //Cities[i].appendChild(document.createTextNode((2009+i).toString()));
    //cities.appendChild(Cidades[i]);
}

This is where I stucked, i dont know how to create this <select> dynamically.

Any sugestions? (for now im trying not to use any toolkit, for the real learning)

Thanks, Jamfi.

---

After having parsed the results, and having an array of objects I do this. I then append this to my div.

var rootElem = document.createElement('select');
var optionElem;
for (var i = 0; i < toolsData.length; i++) {
    optionElem = document.createElement('option');
    rootElem.appendChild(optionElem);
    optionElem.value = toolsData[i].Name;
    optionElem.appendChild(document.createTextNode(toolsData[i].Name));
}