Question

当我从学期中选择一个选项时，它应该打开那个学期的科目，而不是其他任何地方 2 个不同的学期和科目选项框

<select class="form-select" id="sem" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);" required>
        <option selected>Choose...</option>
        <option value="Sem1">Sem1</option>
        <option value="Sem2">Sem2</option>
        <option value="Sem3">Sem3</option>
        <option value="Sem4">Sem4</option>
        <option value="Sem5">Sem5</option>
        <option value="Sem6">Sem6</option>
        <option value="Sem7">Sem7</option>
        <option value="Sem8">Sem8</option>
      </select>
      <label for="inputGroupSelect01">Semester</label>
    </div>
  </div>
  <div class="col-md">
  <div class="form-floating">
    <select class="form-select" id="Sub1" required>
      <option selected>Choose...</option>
      <option value="sub1">Applied Maths-1</option>
      <option value="sub2">Applied Physics-1</option>
      <option value="sub3">Applied Physics-2</option>

    </select>
    <label for="inputGroupSelect01">Subject Name</label>

Answer 1

你需要使用javascript来定义下拉内容，检查此代码段，了解如何清除旧选项并添加与您的选择相关的新选项

您可以将新选项作为子项附加到下拉列表中

function dynamicdropdown(n) {
var arr1 = ["sem1 options","sem1 options","sem1 options","sem1 options","sem1 options"];
var arr2 = ["sem2 options","sem2 options","sem2 options","sem2 options","sem2 options"];
if (n === "Sem1") {
document.getElementById('Sub1').innerHTML = '';
for (var i =0; i< arr1.length; i++) {
document.getElementById('Sub1').innerHTML += "<option>" + arr1[i] + "</option>";
}
} else if (n === "Sem2") {
document.getElementById('Sub1').innerHTML = '';
for (var i =0; i< arr2.length; i++) {
document.getElementById('Sub1').innerHTML += "<option>" + arr2[i] + "</option>";
}
}
}

<select class="form-select" id="sem" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);" required>
        <option selected>Choose...</option>
        <option value="Sem1">Sem1</option>
        <option value="Sem2">Sem2</option>
        <option value="Sem3">Sem3</option>
        <option value="Sem4">Sem4</option>
        <option value="Sem5">Sem5</option>
        <option value="Sem6">Sem6</option>
        <option value="Sem7">Sem7</option>
        <option value="Sem8">Sem8</option>
      </select>
      <label for="inputGroupSelect01">Semester</label>
    </div>
  </div>
  <div class="col-md">
  <div class="form-floating">
    <select class="form-select" id="Sub1" required>
      <option selected>Choose...</option>
      <option value="sub1">Applied Maths-1</option>
      <option value="sub2">Applied Physics-1</option>
      <option value="sub3">Applied Physics-2</option>

    </select>
    <label for="inputGroupSelect01">Subject Name</label>

Answer 2

我不知道我是否完全理解你，但你想要这样的东西吗？

<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">

   </head>
  <body>
    <select class="form-select" id="sem" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);" required>
      <option selected>Choose...</option>
      <option value="Sem1">Sem1</option>
      <option value="Sem2">Sem2</option>
      <option value="Sem3">Sem3</option>
    </select>
    <label for="inputGroupSelect01">Semester</label>
  </div>
</div>
<div class="col-md">
<div  class="form-floating">
  <select id="genDropdown" class="form-select" id="Sub1" required>
    <option  selected>Choose a sem...</option>

  </select>
  <label for="inputGroupSelect01">Subject Name</label>
  <script>
    function doHTML(list){
      let string ="";
      let index = 0;
      list.forEach(element => {
        string += `<option value="sub${index}">${element}</option>`;
        
      });
      return string;
    }
    function dynamicdropdown(sem){
      let subjects1 = ["Applied Maths-1", "Applied Physics-1"];
      let subjects2 = ["Applied Maths-2", "Applied Physics-2"];
      let subjects3 = ["Applied Maths-3", "Applied Physics-3"];
      let genDropdown = document.getElementById("genDropdown");
      if(sem=="Sem1"){
        genDropdown.innerHTML = doHTML(subjects1);
      }
      if(sem=="Sem2"){
        genDropdown.innerHTML = doHTML(subjects2);
      }
      if(sem=="Sem3"){
        genDropdown.innerHTML = doHTML(subjects3);
      }

    }
  </script>
     </body>
</html>

希望能帮到你！

根据另一个选择的选项更改选择选项

2 个答案: