根据上一个下拉列表中的选项在下拉列表中设置选项值

Question

So there are two drop-down lists in my code. One is "Specialization" which has options such as General, Cardiologist, Pediatrician, etc, and the other one is "Doctor" which has the name of the doctors as options. What I want is to show the names of the doctors in the "Doctor" drop-down based on the values selected in the "Specialization" drop-down.

This is how my JSON looks like:

[{"username":"Ashok","spec":"General"},{"username":"arun","spec":"Cardiologist"},{"username":"Dinesh","spec":"General"},{"username":"Ganesh","spec":"Pediatrician"},{"username":"Kumar","spec":"Pediatrician"},{"username":"Amit","spec":"Cardiologist"},{"username":"Abbis","spec":"Neurologist"}]

Eg: If I select 'General' from the "Specialization" drop-down, then only the doctors with General (Ashok and Dinesh) will be shown as the drop-down options in the "doctor" drop-down.

Here is the HTML and JS part:

<div class="col-md-4">
  <label for="spec">Specialization:</label>
</div>
      <div class="col-md-8">
         <select name="spec" class="form-control" id="spec">
           <option value="" disabled selected>Select Specialization</option>
           <?php display_specs();?>
         </select>
         <script>
             let data = <?php echo json_encode($docarray); ?>
             document.getElementById('spec').onchange = function updateSpecs(e) {
             let values = data.filter(obj => obj.spec == this.value).map(o => o.username);   
             document.getElementById('doctor1').value = document.querySelector(`[value=${//query that matches the doctor name in json}]`).getAttribute('data-value');
              };
            </script>
        </div><br><br>

<div class="col-md-4"><label for="doctor">Doctors:</label></div>
     <div class="col-md-8">
        <select name="doctor" class="form-control" id="doctor1" required="required">
           <option value="" disabled selected>Select Doctor</option>
           <?php display_docs();?>
        </select>
         <script>
           document.getElementById('doctor').onchange = function updateFees(e) {
           document.getElementById('docFees').value = document.querySelector(`[value=${this.value}]`).getAttribute('data-value'); // fees will be added based on the doctor mentioned in the db
              };

Here is the PHP code for 'display_specs()' and 'display docs()':

function display_docs()
{
 global $con;
 $query="select * from doctb";
 $result=mysqli_query($con,$query);
 while($row=mysqli_fetch_array($result))
 {
  $username=$row['username'];
  $price=$row['docFees'];
  echo '<option value="' .$username. '" data-value="'.$price.'">'.$username.'</option>';
 }
}

function display_specs() {
  global $con;
  $query="select distinct(spec) from doctb";
  $result=mysqli_query($con,$query);
  while($row=mysqli_fetch_array($result))
  {
    $spec=$row['spec'];
    $username=$row['username'];
    echo '<option value="' .$username. '" data-value="'.$spec.'">'.$spec.'</option>';
  }
}

Screenshot:

I did my best my couldn't able to do that. So any suggestions are welcome. Thanks in advance!

Answer 1

You can use additional attribute in docs list data-spec="'.$spec.'"

function display_docs()
{
 global $con;
 $query = "select * from doctb";
 $result = mysqli_query($con,$query);
 while( $row = mysqli_fetch_array($result) )
 {
  $username = $row['username'];
  $price = $row['docFees'];
  $spec = $row['spec'];
  echo '<option value="' .$username. '" data-value="'.$price.'" data-spec="'.$spec.'">'.$username.'</option>';
 }
}

function display_specs() {
  global $con;
  $query = "select distinct(spec) from doctb";
  $result = mysqli_query($con,$query);
  while($row = mysqli_fetch_array($result))
  {
    $spec = $row['spec'];
    $username = $row['username'];
    echo '<option value = "' .$username. '" data-value = "'.$spec.'">'.$spec.'</option>';
  }
}

then use JS to filter second select

 document.getElementById('spec').onchange = function foo() { let spec = this.value; let docs = [...document.getElementById('doctor').options]; docs.forEach((el, ind, arr)=>{ arr[ind].setAttribute("style",""); if (el.getAttribute("data-spec") != spec ) { arr[ind].setAttribute("style","display: none"); } }); };

 <div class="col-md-4"> <label for="spec">Specialization:</label> </div> <div class="col-md-8"> <select name="spec" class="form-control" id="spec"> <option value="" disabled selected>Select Specialization</option> <option value="General">General</option> <option value="Cardiologist">Cardiologist</option> <option value="Pediatrician">Pediatrician</option> <option value="Neurologist">Neurologist</option> </select> </div><br> <div class="col-md-4"><label for="doctor">Doctors:</label></div> <div class="col-md-8"> <select name="doctor" class="form-control" id="doctor" required="required"> <option value="" disabled selected>Select Doctor</option> <option value="Ashok" data-spec="General">Ashok</option> <option value="arun" data-spec="Cardiologist">arun</option> <option value="Dinesh" data-spec="General">Dinesh</option> <option value="Ganesh" data-spec="Pediatrician">Ganesh</option> <option value="Kumar" data-spec="Pediatrician">Kumar</option> <option value="Amit" data-spec="Cardiologist">Amit</option> <option value="Abbis" data-spec="Neurologist">Abbis</option> </select> </div>