MVC Dropdownlist Cascade – как запустить событие на третьем ddl при изменении выбора первого ddl?

У меня есть три DDL в представлении. Я запускаю функцию javascript при «обмене» первого DDL для заполнения второго и второго для заполнения третьего. Работает отлично.

Проблема в том, что когда для первого DDL установлено значение unselected, т. е. «Выбрать значение», второй 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 events jquery asp.net-mvc cascadingdropdown
person Dave Tapson    schedule 12.03.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Попробуйте выбрать значение для select после его заполнения с помощью $('#selectID').val(), если это не сработает, запустите onchange следующим образом ; $('#selectID').trigger('change')

person Community    schedule 12.03.2014

arrow_upward
1
arrow_downward

Спасибо - я пробовал это и ходил кругами - но это заставило меня думать по-другому. Исправил это, добавив вызов функции, которая заполняет третий 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();
}
person Dave Tapson    schedule 14.03.2014