CODEWITHSUNDEEP
javascripthtml
Manan Parikh
Manan Parikh

Reputation: 27

Change select options based on another selected option

When I select an option from semester than it should open subjects from that semester and not anywhere else 2 different option box for semester and subjects

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

Upvotes: 2

Views: 2371

Answers (2)

Fran Perej&#243;n
Fran Perej&#243;n

Reputation: 101

I don't know if i understand you perfectly, but do you want something like this?

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

Hope that could help you!

Upvotes: 2

Burham B. Soliman
Burham B. Soliman

Reputation: 1577

you need to use javascript to define the dropdown content, check this snippet about how to clear old options and add new options related to your selection

you can either append the new options as childs to the dropdownlist

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>

Upvotes: 1

Related Questions