javascript - 从下拉列表中选择值时清除值输入字段并使用新值更新
问题描述
我有一个包含五个输入字段的 div。最初输入字段没有值,将被隐藏。在下拉值更改时,我想更新输入字段的值。
对于第一张图片,我在第一学期有五个课程代码,所以所有输入字段都有值。但是对于第二张图片,我在第 11 学期有两个课程代码,因此只有前两个输入字段的值被更改,但其余输入字段具有以前的值。我想在这些字段上显示空字符串。在我的 jQuery 中,我尝试了删除和清空函数,但它删除了 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();
}
});
})
});
});
如何清除我的输入字段并仅填写下拉值更改时的更新值?
解决方案
您以前选择的学期节目中的过去价值观。仅将类“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();
}
});
})
});
});
推荐阅读
- reactjs - 用两个字段更新一个状态?
- r - 是否有 R 函数来计算累积分布函数?
- python - 如何在 discord.py 中设置一个不带前缀的命令,仅带有某个单词
- python - 有人可以解释一下代码数据集的这个 tensorflow 行吗,metadata = tfds.load('fashion_mnist', as_supervised=True, with_info=True)
- html - 仅当小于父级时才垂直居中子级
- asp.net - Chrome 87 在 CORS 中针对 Windows IIS 10 的 Windows 身份验证失败
- r - 删除匹配向量的行
- python - 如何在 Python 中使用 Pandas 创建基于参数的 SQL 服务器查询
- python - 如何检查Python中的每个单词
- python - 3 类分类问题的截止阈值