dropdownlist jquery ddl.change() seems to fire before change takes place

Question

Hi

I have three cascaded drop down lists.

ddlIllnessType, ddlIllnessSubType and ddlInfectiousAgent

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

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'?????!

Thanks in advance

Andrew

PS: The full jQuery and the HTML are as follows:

The full jQuery code is:

<script type="text/javascript">

    $('document').ready(function() {
        var pEst = $("#pEncephalitisSubType");
        var pIa = $("#pInfectiousAgent");
        var ddlEst = $("#IdEncephalitisSubType");
        var ddlIa = $("#IdInfectiousAgent");

        $('#SubTypeContainer').hide();

        pEst.hide();
        pIa.hide();
//        debugger
        $('select').each(function() {
            $(this).val(""); //alert($(this).val()); 
        });

        // Change Event Handler
        $("#IdEncephalitisType").change(function() {
            var selection = $(this).val();
            pEst.fadeOut('slow');
            pIa.fadeOut('slow');
            ddlEst.val("");
            ddlIa.val("");

            if (selection == 0) {
                $('#SubTypeContainer').fadeOut('slow');
            }
            else {
                var url = "/Members/IllnessDetail/CascadedDdlSubType/" + selection;
                AjaxEncephalitisSubTypes(url);
            }
        });

        // Change Event Handler
        $("#IdEncephalitisSubType").change(function() {
            var selection = $(this).val();
            debugger
            pIa.fadeOut('slow');
            ddlIa.val("");
            if (selection != "") {
                if (($("#IdEncephalitisType").val() == 1) && ((selection == 1) || (selection == 2))) {
                    var url = "/Members/IllnessDetail/CascadedDdlInfectiousAgent/" + selection;
                    AjaxInfectiousAgents(url);
                }
            }
        });

        function AjaxEncephalitisSubTypes(url) {
            $('#SubTypeContainer').fadeOut('slow');
            $.getJSON(url, null, function(json) {
                ddlEst.empty();
                ddlIa.empty();
                PrependDdlDefaults(ddlEst);
                var i = 0;
                $.each(json, function(index, optionData) {
                    ddlEst.append("<option value='"
                        + optionData.EncephalitisSubTypeId
                        + "'>" + optionData.Name
                        + "</option>");
                    i++;
                });
                $('#SubTypeContainer').fadeIn('slow');
                ddlEst.val("");
                pEst.fadeIn('slow');
            });
        }

        function AjaxInfectiousAgents(url) {
            $('#SubTypeContainer').fadeOut('slow');
            $.getJSON(url, null, function(data) {
                var i = 0;
                ddlIa.empty();
                PrependDdlDefaults(ddlIa);
                $.each(data, function(index, optionData) {
                    ddlIa.append(
                    "<option value='"
                    + optionData.InfectiousAgentId
                    + "'>" + optionData.Name
                    + "</option>");
                    i++;
                });
            });
            ddlIa.val("");
            $('#SubTypeContainer').fadeIn('slow');
            pIa.fadeIn('slow');
        }

        function PrependDdlDefaults(ddl) {
            ddl.prepend(
                "<option value='"
                + ""
                + "'><i>" + " --- Please choose... --- "
                + "</i></option>");
        }
    });


</script>


<fieldset>
    <legend>The Illness</legend>
    <p>
        According to your input, different drop down lists will appear, specialised to only
        show the options that apply.
    </p>
    <p>
        <label for="IdEncephalitisType">
            Type Of Encephalitis:</label>
        <%= Html.DropDownList("IdEncephalitisType", Model.EncephalitisTypes)%>
        <%= Html.ValidationMessage("IdEncephalitisType", "*") %>
    </p>
    <div id="SubTypeContainer" style="margin-left:10px;border: solid 1px #ccc; background: #efefef;">
        <p class="highlight" id="lblSubTypeContainer" style="font-weight:bold;color:#c00;">
            Extra Information regarding the Illness:</p>
        <p id="pEncephalitisSubType">
            <label id="lblEncephalitisSubType" for="IdEncephalitisSubType">
                Sub Type of Encephalitis:</label>
            <%= Html.DropDownList("IdEncephalitisSubType", Model.EncephalitisSubTypes)%>
            <%= Html.ValidationMessage("IdEncephalitisSubType", "*") %>
        </p>
        <p id="pInfectiousAgent">
            <label id="lblInfectiousAgent" for="IdInfectiousAgent">
                Infectious Agent:</label>
            <%= Html.DropDownList("IdInfectiousAgent", Model.InfectiousAgents) %>
            <%= Html.ValidationMessage("IdInfectiousAgent", "*") %>
        </p>
    </div>
</fieldset>

The controller doesn't need to be shown, as the json delivered is correct. As in I've tested it and what gets rendered is correct.

Answer 1

There is good example here which shows a solution to create cascading drop down using jQuery in MVC.NET :
http://helios.ca/2009/05/30/aspnet-mvc-cascading-dropdownlist-with-jquery/

Hope this helps.

Answer 2

Cracked it!!!!!!

The problem was in the json callback:

$.each(json, function(index, optionData) {                    ddlEst.append("<option value='"                        + optionData.Id                        + "'>" + optionData.Name                        + "</option>");                    i++;                });
$.each(json, function(index, optionData) {
                    ddlEst.append("<option value='"
                        + optionData.Id
                        + "'>" + optionData.Name
                        + "</option>");
                    i++;
                });

...where optionData.Id is not the right name for the field! Oh, **&^%$£"!¬

As a result, all the tags had the following value:

value="undefined"

AAAAAAAARRRRRRGGGGGGJJJHHHHHH!!!!!!!!