How to add onchange event trigger in dropdowns?

Hi,

I try to add the onChange Event trigger in the font family dropdown. When changing the font family, load data to the font style dropdown based on the selections. I try multiple ways but had no luck. Please give your suggestions.

//get unique Array elements
Array.prototype.unique = function (){
    var r = new Array();
    o:for(var i = 0, n = this.length; i < n; i++){
        for(var x = 0, y = r.length; x < y; x++){
            if(r[x]==this[i]) continue o;}
        r[r.length] = this[i];}
    return r;
}
var sysFonts = app.fonts.everyItem();
sysFontsList = sysFonts.fontFamily.unique();
sysFontsList.unshift("- Select Font Family -");		

var myDialog = app.dialogs.add({name:"Font"});
with(myDialog){
	with(dialogColumns.add()){
		with(dialogRows.add()){
			with(dialogColumns.add()){
				with(borderPanels.add()){
					with(dialogColumns.add()){
						with(dialogRows.add()){
							with(dialogColumns.add()){
								staticTexts.add({staticLabel:"Font:", minWidth:40});
							}
							with(dialogColumns.add()){
								var dFontFamily = dropdowns.add({stringList:sysFontsList, selectedIndex:0});
							}
							with(dialogColumns.add()){
								staticTexts.add({staticLabel:"Font Style:", minWidth:45});
							}
							with(dialogColumns.add()){
								var dFontStyle = dropdowns.add();
							}
						}
					}
				}
			}
		}
	}
}
var myResult = myDialog.show();
	if(myResult == true){
		
	}