MVC Dropdownlist Cascade - 当第一个 ddl 选择更改时如何在第三个 ddl 上触发事件？答案

【问题标题】：MVC Dropdownlist Cascade - how to fire event on third ddl when first ddl selection changes?MVC Dropdownlist Cascade - 当第一个 ddl 选择更改时如何在第三个 ddl 上触发事件？
【发布时间】：2014-03-12 11:18:46
【问题描述】：

我在一个视图中有三个 DDL。我在第一个 DDL 的“onchange”上触发一个 javascript 函数来填充第二个，第二个来填充第三个。工作正常。

问题是，当第一个 DDL 设置为未选中时，即“选择一个值”，第二个 DDL 被触发并将自身设置为“选择一个值”，但第二个 DDL 'onchange' 事件不会触发，所以第三个DDL 仍会填充从先前选择中获得的数据。

如何让第二个 DDL 触发可用于刷新第三个 DDL 的事件？还是有别的办法？

代码如下：

@{
   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>

【问题讨论】：

标签： javascript jquery asp.net-mvc events cascadingdropdown

【解决方案1】：

尝试在使用$('#selectID').val() 填充后为select 选择一个值，如果这不起作用，则像这样触发onchange； $('#selectID').trigger('change')

【讨论】：

【解决方案2】：

谢谢 - 我试过了，然后转了一圈 - 但这让我有了不同的想法。通过在填充第二个 DDL 的函数中添加对填充第三个 DDL 的函数的调用来修复它 - 这样它总是被调用。

    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();
}

【讨论】：