c# - 在动态生成的下拉列表中触发更改事件

Question

对于一个项目，我正在制作一个项目选择器，对于每个选定的项目，您都会获得 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>

onchange 的代码：

    <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 事件，但仅适用于该面板中的 Dropbox：

<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>
}

清晰的草图：清晰 的草图

标签： c#jqueryhtmlasp.net-mvcpartial-views