如何从下拉列表中选择任何值并在节点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选项。

我在 sn-p 中做了一个简单的示例，您可以在其中看到它是如何正常工作的。

这是您项目的代码：

<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>

这是你可以运行的 sn-p：

<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>