Javascript 基于上一个下拉列表中的选项，在下拉列表中设置选项值

所以在我的代码中有两个下拉列表。一个是“专科”，可以选择普通医生、心脏病专家、儿科医生等；另一个是“医生”，可以选择医生的名字。我想要的是根据在“专业化”下拉列表中选择的值，在“医生”下拉列表中显示医生的姓名

这就是我的JSON的样子：

[{“用户名”：“Ashok”，“spec”：“General”}，{“用户名”：“arun”，“spec”：“心脏病专家”}，{“用户名”：“Dinesh”，“spec”：“General”}，{“用户名”：“Ganesh”，“spec”：“Pediatrician”}，{“用户名”：“Kumar”，“spec”：“Pediatrician”}，{“用户名”：“Amit”，“spec”：“心脏病专家”}，{“用户名”：“Abbis”，“spec”：“Neurologist”}，

例如：如果我从“专业化”下拉列表中选择“普通”，那么在“医生”下拉列表中，只有具备普通资格的医生（Ashok和Dinesh）才会显示为下拉选项

以下是HTML和JS部分：

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

专业化：
选择专业化
让数据=
document.getElementById（'spec'）.onchange=函数updateSpecs（e）{
让values=data.filter（obj=>obj.spec==this.value）.map（o=>o.username）；
document.getElementById（'doctor1'）。value=document.querySelector（`[value=${//与json中的医生名称匹配的查询}]`）。getAttribute（'data-value'）；
};



医生:
选择医生
document.getElementById（'doctor'）.onchange=函数updateFees（e）{
document.getElementById（'docFees'）。value=document.querySelector（`[value=${this.value}]`）。getAttribute（'data-value'）；//将根据数据库中提到的医生添加费用
};

下面是“display_specs（）”和“display docs（）”的PHP代码：

功能显示\u docs（）
{
全球$con；
$query=“从doctb中选择*”；
$result=mysqli\u查询（$con，$query）；
while（$row=mysqli\u fetch\u数组（$result））
{
$username=$row['username']；
$price=$row['docFees']；
回显“.$username.”；
}
}
功能显示规格（）{
全球$con；
$query=“从doctb中选择不同的（规格）”；
$result=mysqli\u查询（$con，$query）；
while（$row=mysqli\u fetch\u数组（$result））
{
$spec=$row['spec']；
$username=$row['username']；
回显“.$spec.”；
}
}

截图：

---

我已经尽力了，但我做不到。因此，欢迎提出任何建议。提前谢谢

您可以在文档列表中使用附加属性

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'];
  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>';
  }
}

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