MVC Dropdownlist Cascade - how to fire event on third ddl when first ddl selection changes?

Question

I have three DDL's in a view. I fire a javascript function on 'onchange' of the first DDL to populate the second, and of the second to populate the third. Works fine.

Problem is, when first DDL is set to unselected i.e. "Select a Value", the second DDL gets fired and sets itself to "Select a Value", but the second DDL 'onchange' event does not fire, so the third DDL remains populated with the data that it got from the previous selection.

How do I get the second DDL to fire an event I can use to refresh the third DDL? Or is there another way?

Code below:

@{
   ViewBag.Title = "CascadingList";
   Layout = "~/Views/Shared/_Layout.cshtml";
}
@{Html.EnableUnobtrusiveJavaScript(true);}
<script type="text/javascript">
$(document).ready(function () {

    getMarket();

});

function getMarket() {
    var url = '@Url.Content("~/Strategies/MarketList")/';
    $.getJSON(url, function (data) {
        var items = "<option>Select a Market</option>";
        $.each(data, function (i, market) {
            if (market.Value.indexOf("\'") > -1) {
                s = market.Value + " " + market.Text;
                alert(s + ": Market.Value cannot contain \'")
            }
            items += "<option value='" + market.Value + "'>" + market.Text + "         </option>";
        });
        $('#MarketsID').html(items);
    });
}

function getShareType() {
    var url = '@Url.Content("~/Strategies/ShareTypeList")/' + $('#MarketsID').val();
    $.getJSON(url, function (data) {
        var items = '<option>Select an Asset Type</option>';
        $.each(data, function (i, shareType) {
            items += "<option value='" + shareType.Value + "'>" + shareType.Text + "    </option>";
        });
        $('#ShareTypesID').html(items);
    });
}

function getShare() {
    var url = '@Url.Content("~/Strategies/ShareList")/' + $('#MarketsID').val() + '|' + $('#ShareTypesID').val();
    $.getJSON(url, function (data) {
        var items = '<option>Select a Share</option>';
        $.each(data, function (i, share) {
            items += "<option value='" + share.Value + "'>" + share.Text + "</option>";
        });
        $('#SharesID').html(items);
    });
}
</script>

<h2>Strategy</h2>

<div id="MarketsDivID">
  <label for="Markets">Markets</label>
  <select id="MarketsID" name="Markets" onchange="getShareType()"></select>
</div>

<div id="ShareTypesDivID">
  <label for="ShareTypes">ShareTypes</label>
  <select id="ShareTypesID" name="ShareTypes" onchange="getShare()" ></select>
</div>

<div id="SharesDivID">
  <label for="Shares">Shares</label>
  <select id="SharesID" name="Shares" ></select>
</div>

Answer 1

Thanks - I tried that and went around in circles - but it made me think differently. Fixed it by adding a call to the function that populates the third DDL in the function that populates the second DDL - that way it always gets called.

    function getShareType() {
    var url = '@Url.Content("~/Strategies/ShareTypeList")/' + $('#MarketsID').val();
    $.getJSON(url, function (data) {
        var items = '<option>Select an Asset Type</option>';
        $.each(data, function (i, shareType) {
            items += "<option value='" + shareType.Value + "'>" + shareType.Text + "</option>";
        });
        $('#ShareTypesID').html(items);
    });
**** Added This ****
    getShare();
}

Answer 2

Try selecting a value for the select after populating it using $('#selectID').val(), if that doesn't work trigger onchange like this ; $('#selectID').trigger('change')