如何从下拉菜单中选择任何值，并在下一个下拉菜单中自动获取另一个值在node js的同一页面

Question

当我从下拉菜单中选择课程时，在同一页面的下拉菜单中自动获取特定课程下的学期。请帮我解决这个错误，我已经被困在这里几个小时了，尝试了很多编辑，但它不适合我。

这是我的路线

router.get('/admin/add-subject', adminAuthMiddleware, async (req, res) => {
try {
await Course.find((err, doc) => {
if (!err) {
res.render('admin-views/subject/add_subject', { courses: doc });
} else {
res.send('Error in Fetching Courses list :' + err);
}
})
} catch (err) {
res.send(err);   
}
});

这是add_subject.ejs

<div class="col-12">
<div class="form-group">
<label for="email-id-icon" style="font-size: 15px;">Select Courses</label>
<div class="input-group input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text"><i data-feather="book"></i></span>
</div>
<select name="select_course" class="form-control" required>
<% for (let i = 0; i < courses.length; i++) { %>
<option value="<%= courses[i].course_name %>"><%= courses[i].course_name %></option>
<% } %>
</select>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group">
<label for="email-id-icon" style="font-size: 15px;">Select Semester</label>
<div class="input-group input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text"><i data-feather="book"></i></span>
</div>
<select name="select_semester" class="form-control" required>
<% for (let i = 0; i < courses.length; i++) { %>
<option value="<%= courses[i].course_semester %>"><%= courses[i].course_semester %></option>
<% } %>
</select>
</div>
</div>
</div>

Answer 1

你可以用一个onchange事件处理程序来做这件事，它把select1的值发送给一个js函数，这个函数会比较选中的select1值和select2值。当它匹配时，选择具有相同值的select2选项

我做了一个简单的例子，你在代码片段中看到它是如何工作的。

下面是项目的代码:

<div class="col-12">
<div class="form-group">
<label for="email-id-icon" style="font-size: 15px;">Select Courses</label>
<div class="input-group input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text"><i data-feather="book"></i></span>
</div>
<select name="select_course" class="form-control" onchange="changeOtherSelect(this.value)" required>
<% for (let i = 0; i < courses.length; i++) { %>
<option value="<%= courses[i].course_name %>">
<%= courses[i].course_name %>
</option>
<% } %>
</select>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group">
<label for="email-id-icon" style="font-size: 15px;">Select Semester</label>
<div class="input-group input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text"><i data-feather="book"></i></span>
</div>
<select id="secondSelect" name="select_semester" class="form-control" required>
<% for (let i = 0; i < courses.length; i++) { %>
<option value="<%= courses[i].course_semester %>">
<%= courses[i].course_semester %>
</option>
<% } %>
</select>
</div>
</div>
</div>
<script>
function changeOtherSelect(value) {
let secondSelect = document.getElementById('secondSelect');
console.log(secondSelect)
for (let i = 0; i < secondSelect.childNodes.length; i++) {
if (secondSelect.childNodes[i].value == value) {
secondSelect.childNodes[i].selected = true;
return true;
}
}
}
</script>

下面是你可以运行的代码片段:

<select name="select_course" class="form-control" required onchange="changeOtherSelect(this.value)">
<option value="value1">value1</option>
<option value="value2">value2</option>
<option value="value3">value3</option>
<option value="value4">value4</option>
</select>
<select id="secondSelect" name="select_semester" class="form-control" required>
<option value="value1">value1</option>
<option value="value2">value2</option>
<option value="value3">value3</option>
<option value="value4">value4</option>
</select>
<script>
function changeOtherSelect(value){
let secondSelect = document.getElementById('secondSelect');
for(let i=0; i<secondSelect.childNodes.length; i++){
if(secondSelect.childNodes[i].value == value){
secondSelect.childNodes[i].selected = true;
return true;
}
}
}
</script>