listBox to listBox from XML

1

I’m trying to get this right and I can’t figure it out. How can I load XML into a listBox Component without loading each of my subcategories? Here’s what I’m trying to do…

For example:

<?xml version=“1.0” encoding=“ISO-8859-1”?>
<articles>
<cat url=“http://www.msn.com” desc=“Flash Forward SF” />
<subcat url=“http://www.msn.com” desc=“Flash Forward Sub” />
<cat url=“http://www.msn.com” desc=“Flash Forward SF” />
<subcat url=“http://www.msn.com” desc=“Flash Forward Sub” />
<cat url=“http://www.msn.com” desc=“Flash Forward SF” />
<subcat url=“http://www.msn.com” desc=“Flash Forward Sub” />
</articles>

I want to load the main “cat” into one listBox and when you click on one of that main “cat” it loads the corresponding “subcat” into a second listBox. Instead, the main “cat” and the "subcat"s are all being loaded into the first listBox. Make sense?

Here’s my actionscript:

var alist:XML = new XML();
alist.ignoreWhite = true;
alist.onLoad = function() {
 var articles:Array = this.firstChild.childNodes;
 for(i=0;i<articles.length;i++) {
  articleList.addItem(articles*.attributes.desc,articles*.attributes.url);
 }
 
 ns.play(articleList.getItemAt(0).data);
 articleList.selectedIndex = 0;
}
 
var artList:Object = new Object();
artList.change = function() {
 ns.play(articleList.getItemAt(articleList.selectedIndex).data);
}
articleList.addEventListener("change",artList);
alist.load("videos.xml");
articleList.setStyle("selectionColor",0xCCCCCC);
articleList.setStyle("textSelectedColor",0x000000);
articleList.setStyle("rollOverColor",0xCCCCCC);

Any help would be greatly appreciated.