我想做一个条件，如果我从第一个下拉菜单中选择这个项目，它会显示我只在第二个下拉菜单中选择的项目

Question

如果我想从我的表格下拉列表中选择医生的姓名，那么它只会在其下方的第二个下拉列表中显示他/她的专长。例如，Sarah 医生是妇科医生，所以当我从下拉菜单中选择她的名字时，它只会在第二个下拉菜单中显示她的专长，而隐藏另一个专长。

例如，如果我选择 Dr. James，他是妇科医生和计划生育顾问，下面的下拉菜单应该显示妇科和计划生育诊所服务，而没有其他内容。

因此，如果任何“医生”拥有超过 1 个专业，则用户可以选择任何一项服务。或者，如果用户选择了任何服务，如 Gynae，那么下拉菜单只在列表中显示 Gynae 顾问，例如，如果我从服务部分选择“妇科”，那么上方的下拉菜单只显示那些医生姓名妇科顾问，或者如果我选择“家庭诊所”服务，那么它只显示那些医生的名字，即妇科顾问。如果 James 医生是妇科和家庭计划顾问，那么如果用户选择妇科，那么它会显示 James 医生的名字以及 Sarah 医生

<select name="doctorsname" id="doctors" class="form-control" required>
    <option value="No Doctor Selected">Select Your Doctor</option>
    <option value="Dr. Sarah (Gynaecologist)> Dr.Sarah (Gynaecologist) </option>
    <option value="Dr. James (Gynaecologist & Family Planner Consultant)">Dr. James (Gynaecologist & Family Planner Consultant)</option>
    </select>
    
    
    
   <select name="services" id="service" class="form-control" required>
<option value="No Service Selected">Select Your Services</option>
<option value="Gynaecology">Gynaecology</option>
<option value="Family Planing Clinic">Family Planing Clinic</option>
</select>

Answer 1

我不知道这是否正是你想要的，但你可以在此基础上继续

$('#doctors').on('change',function(){
  let doctorsService = $(this).find(':selected')[0].dataset.service;
  if( doctorsService != "none"){
    $('#service').find('option').each(function(){
      if( $(this)[0].dataset.service != "none"){
        if( doctorsService.split(',').includes( $(this)[0].dataset.service))
          $(this).show();
        else
          $(this).hide();
      }
    });
  }else{
    $('#service').find('option').show();
  }
});

$('#service').on('change',function(){
  let service = $(this).find(':selected')[0].dataset.service;
  if( service != "none"){
    $('#doctors').find('option').each(function(){
      if( $(this)[0].dataset.service != "none"){
        if( $(this)[0].dataset.service.indexOf(service) != -1)
          $(this).show();
        else
          $(this).hide();
      }

    });
  }else{
    $('#doctors').find('option').show();
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="doctorsname" id="doctors" class="form-control" required>
   <option value="No Doctor Selected" data-service="none">Select Your Doctor</option>
   <option value="Dr. Sarah (Gynaecologist)" data-service="1">Dr.Sarah (Gynaecologist)</option>
   <option value="Dr. James (Gynaecologist & Family Planner Consultant)" data-service="1,2">Dr. James (Gynaecologist & Family Planner Consultant)</option>
</select>
<select name="services" id="service" class="form-control" required>
   <option value="No Service Selected" data-service="none">Select Your Services</option>
   <option value="Gynaecology" data-service="1">Gynaecology</option>
   <option value="Family Planing Clinic" data-service="2">Family Planing Clinic</option>
</select>