Hi

I have three cascaded drop down lists.  Lets call them:

ddlIllnessType, ddlIllnessSubType and ddlInfectiousAgent

Initially, only ddlIllnessType is showing. On change, ddlIllnessSubType is filled with json data and made visible. So far, so good.

Famous last words...

Next, when the user selects a value from ddlIllnessSubType, a similar procedure runs for ddlInfectiousAgent in the ddlIllnessSutType change event handler. However, in the following code, $(this).val() always comes up as 'undefined', even though the user has chosen an existing value:

$("#ddlIllnessSubType").change(function() {


var selection = $(this).val();


// go and get Json based on the value of selection.  
// Doesn't work cos selection == 'undefined'
var url = "/IllnessDetail/CascadedDdlInfectiousAgent/" + selection;

getJSON

(url, function(data) {...});
...
});

Why is selection == 'undefined'?????!

The only thing I can think of is that the change event is firing out of sych.  Could this be because in the ddlIlnessTypes.change() method I  do the following:

ddlIllnessSubTypes.empty();

getJson(...); // fill ddlIllnessSubTypes with new options using ajax call.

ddlIllnessSubTypes.val("");

I do this because the user might change the value in ddlIllnessTypes after she has set ddlIllnessSubTypes and ddlInfectiousAgents, so need to clear the coast.

However, why would emptying and setting the ddl to a default in code then skew the event handler?

Note:  I am VERY new to jQuery (this is my first outing...)

Thanks in advance

Andrew