javascript - 如何在编辑视图中触发动态下拉菜单

Question

我是 Web 开发的新手，我刚刚学习了 Jquery 来创建动态下拉列表。我面临的问题是当我进入编辑视图时我的下拉菜单没有更新。

所以我已经能够成功地为我的创建视图创建动态下拉列表（参见代码）。

创建.cshtml：

<div class="form-group col-md-4" id="drop_1">
    <label asp-for="Option_1" class="control-label"></label>
    <select asp-for="Option_1" class="form-control" id="opt1">
         <option value="">Select Option</option>
         <option value="A">A</option>
         <option value="B">B</option>
         <option value="C">C</option>
         <option value="D">D</option>
    </select>
    <span asp-validation-for="Option_1" class="text-danger"></span>
</div>

<div class="form-group col-md-4" id="drop_2">
    <label asp-for="Option_2" class="control-label"></label>
    <select asp-for="Option_2" class="form-control" id="opt2">
         <option value="">Select Option</option>
    </select>
    <span asp-validation-for="Option_2" class="text-danger"></span>
</div>

<div class="form-group col-md-4" id="drop_3">
    <label asp-for="Option_3" class="control-label"></label>
    <select asp-for="Option_3" class="form-control" id="opt3">
         <option value="">Select Option</option>
    </select>
    <span asp-validation-for="Option_3" class="text-danger"></span>
</div>

Edit.cshtml 与 Create.cshtml 相同

网站.js：

$(function() {
    $('#opt3').change(function () {
        var x = $(this);
        if (x.val() == "") {
            $('#drop_2').hide();
            $('#drop_3').hide();
        }
        else {
            if (x.val() == "A") {
                $('#opt2').find('option').remove().end();
                $('#opt2').append('<option value="D">D</option>');
                .
                .
                . etc.
            }
        }
        //Same for the remaining dropdowns
    });
});

关键是当我开始单击我的下拉菜单时，我的下拉菜单会起作用。但是我想看到的是，当我尝试进入我的编辑视图并拉入数据时，下拉菜单会根据下拉菜单 1 和 2 的任何数据自动更改，而无需用户重新选择下拉菜单 1和 2。

标签： javascriptjqueryasp.net-core.net-coreasp.net-core-mvc

Answer 1

当元素的值改变时，change 事件被发送到元素。如果您想在第一次加载页面时更改下拉列表，您可以直接在 $(function () {});. 例如，如果您想D在加载编辑视图后添加选项以选择 2：

<script>
    $(function () {

        $('#opt2').append('<option value="D">D</option>');

        //write your other logic here 



        $('#opt3').change(function () {                                                                                             
            var x = $(this);                                                                                                
            if (x.val() == "") {
                $('#drop_2').hide();
                $('#drop_3').hide();
            }
            else {
                if (x.val() == "A") {
                    $('#opt2').find('option').remove().end();
                    $('#opt2').append('<option value="D">D</option>');

                }
            }
            //Same for the remaining dropdowns
        });
    });

</script>