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

Question

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

问题是，当第一个 DDL 设置为未选择(即“选择一个值”)时，第二个 DDL 被触发并将其自身设置为“选择一个值”，但第二个 DDL 'onchange' 事件不会触发，因此第三个 DDL 不会触发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>

Answer 1

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