how to do selecting any value from dropdown and automatically fetch another value in next dropdownin same page in node js

Question

when i select course from dropdown the automatically fetch semester under particular course in next dropdown in same page. Please help me to resolve the error i have been stuck here for hours tried a lot of edits but its not working for me.

Here is my route

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);   
    }
});

Here is the 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

You can do it with a onchange event handler, which takes select1 value send to a js function that compares the values of selected select1 value and select2 values. When it match select the option of select2 with the same value.

I do a simple example that you have in the snippet where you see how it works fine.

Here is the code for your project:

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

And here is the snippet you can run:

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