Question

对于一个项目，我正在创建一个项目选择器，对于每个选中的项目，您会获得3个带有选择的下拉菜单。第一个下拉菜单提供第二个下拉菜单的选项，当您选择第二个下拉菜单时，您将获得最后的选择。这些下拉列表是使用ASP.net core 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事件，但仅适用于该面板中的保管箱：

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

为清楚起见，请进行以下绘制： Sketch for clarirty

在动态生成的下拉列表上触发更改事件

0 个答案: