从下拉列表中选择值时清除值输入字段并使用新值更新

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

您在之前选择的学期节目中的过去价值观。仅将类“cinput”赋予输入的父 div，而不是赋予所有输入字段相同的类。要清除所有输入字段，您可以尝试在 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();
                    }
                });
            })
        });
    });