Задать значения параметров в раскрывающемся списке на основе параметров из предыдущего раскрывающегося списка

Question

Итак, в моем коде есть два раскрывающихся списка. Одним из них является «Специализация», в котором есть такие параметры, как «Общий», «Кардиолог», «Педиатр» и т. Д. c, а другим - «Доктор», в качестве имени которого названы врачи. Я хочу показать имена врачей в раскрывающемся списке «Доктор» на основе значений, выбранных в раскрывающемся списке «Специализация».

Вот как выглядит мой JSON:

[{"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"}]

Например: если я выберу «Общий» в раскрывающемся списке «Специализация», то только врачи с общим (Ашок и Дайн sh) будут показаны как параметры раскрывающегося списка в раскрывающемся списке «доктор» () 'и' 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>';
  }
}

Снимок экрана:

Я сделал все, что мог, не смог этого сделать. Так что любые предложения приветствуются. Заранее спасибо!

Answer 1

Вы можете использовать дополнительный атрибут в списке документов 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>';
  }
}

, затем использовать JS для фильтрации второго выбора

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>