当下拉列表中的 select 值时清除值输入字段并更新为新值

Question

我有一个 div，其中包含五个输入字段。最初输入字段没有值，将被隐藏。在下拉值更改时，我想更新输入字段的值。

第一张图

第二张图片

对于第一张图片，我在第一学期有五个课程代码，所以所有输入字段都有值。但是对于第二张图片，我在第 11 学期有两个课程代码，因此只有前两个输入字段的值发生了变化，但其余输入字段具有以前的值。我想在这些字段上显示空字符串。在我的 jQuery 中，我尝试了 remove 和 empty 函数，但它删除了我的 div 输入字段并且没有显示任何值。

jQuery

    $(document).ready(function () {
    var courses = $('#viewCourseCodeField');
    courses.hide();
    $("#SemesterList").change(function () {
        //courses.empty();

        var semesterName = $("#SemesterList option:selected").text();
        $.getJSON('/Student/GetCourseOfSemester', {semester: semesterName}, function (response) {
            $.each(response, function (key, value) {
                if (value == null) {
                    courses.empty();
                }
                else {
                    for(var i = 0; i < response.length; i++)
                    {
                        var inputField = "c0".concat((i+1).toString());
                        $('#'+inputField).val(response[i]["courseCode"]);
                    }
                    courses.show();
                }
            });
        })
    });
});

如何清除我的输入字段并仅填充下拉值更改时的更新值？

Answer 1

您之前选择的学期显示的过去价值观。仅将 class "cinput" 提供给输入的父级 div，而不是将相同的 class 提供给所有输入字段。要清除所有输入字段，您可以尝试在 ajax 调用之前将它们的值设置为空；

  $(document).ready(function () {
        var courses = $('#viewCourseCodeField');
        courses.hide();
        $("#SemesterList").change(function () {
            //courses.empty();

           $('.cinput input[type="text"]').val(''); // Add this

            var semesterName = $("#SemesterList option:selected").text();
            $.getJSON('/Student/GetCourseOfSemester', {semester: semesterName}, function (response) {
                $.each(response, function (key, value) {
                    if (value == null) {
                        courses.empty();
                    }
                    else {
                        for(var i = 0; i < response.length; i++)
                        {
                            var inputField = "c0".concat((i+1).toString());
                            $('#'+inputField).val(response[i]["courseCode"]);
                        }
                        courses.show();
                    }
                });
            })
        });
    });

当下拉列表中的 select 值时清除值输入字段并更新为新值

Clear value input fields and update with new value when select value from dropdown list

javascript

jquery

cascadingdropdown

asp.net-core