событие изменения триггера при динамически создаваемом раскрывающемся списке - PullRequest
Новая
       10

событие изменения триггера при динамически создаваемом раскрывающемся списке

0 голосов
/ 05 июля 2018

Для проекта я делаю селектор элементов, и для каждого выбранного элемента вы получаете 3 раскрывающихся списка с вариантами выбора. в первом раскрывающемся списке отображаются параметры для второго раскрывающегося списка, а при выборе второго раскрывающегося списка - последний вариант. Эти выпадающие списки генерируются с использованием частичных представлений в ядре ASP.net 2. которое я получаю с помощью функции изменения Jquery.

Будет больше панелей с 3 раскрывающимися списками, поэтому нужно найти конкретную панель, с которой мы работаем.

Код HTML: 

            <div class="col-4">
                <div class="form-group col-12">
                    <div class="ValueProposition" id="ValueProposition">
                        <label for="sel1">Selecteer Value Proposition:</label>
                        <select class="form-control ValuePropositionSelect" id="ValuePropositionSelect">
                            <option value="" hidden>Selecteer Value Proposition:</option>
                            @foreach (var ValueProposition in Model.ValuePropositions)
                            {
                                <option value="@ValueProposition.IdValueProposition" id="@ValueProposition.Name">@ValueProposition.Name</option>
                            }
                        </select>
                    </div>
                </div>
                <div class="form-group col-12">
                    <div class="Cloud" id="Clouds" style="display:none">
                    </div>
                </div>
                <div class="form-group col-12">
                    <div class="Platforms" id="Platforms" style="display:none">
                    </div>
                </div>
            </div>

Код для обмена: 

    <script>
$("select.CloudSelect").on('change', function (event) {
    console.log("select.Cloudselect changed function called");
    $(event.target).parents('.panel').find('a.CloudName').html("Platform: " + $(event.target).find(":selected").html());

    $(event.target).parents().closest('div.col-4').find('.Platforms').slideUp();

    $.ajax({
        type: "POST",
        url: '@Url.Action("GetPlatformForCloudValueProposition")',
        data: {
            idCloud: event.target.value,
            idValueProposition: $(event.target).parents('.panel').find('a.ValuePropositionId').html()
        },
        success: function (data) {
            $(event.target).closest('div.col-4').find('.Platforms').html(data);
            $(event.target).closest('div.col-4').find('.Platforms').slideDown();
            console.log($(event.target).parents('.panel').find(':selected').html());
        },
        error: function () {}
    });
});

Когда передается только одно значение из контроллера в представление, он должен запускать событие onchange, но только для выпадающего списка на этой панели: 

<select class="form-control CloudSelect" id="CloudSelect">
@if (Model.cloudValuePropositions.Count() == 1)
{
    <option value="@Model.cloudValuePropositions.First().IdCloud">@Model.cloudValuePropositions.First().IdCloudNavigation.Name </option>
    <script>
        $(event.target).parents('.panel').find("select.CloudSelect").trigger("change");
    </script>
}

эскиз для наглядности: Эскиз для ясного

...