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

Question

如果我想从我的表单下拉列表中选择医生的名字，那么它只会在下面的第二个下拉列表中显示他/她的专业。 例如，莎拉博士是妇科医生，所以当我从下拉菜单中选择她的名字时，它只会在第二个下拉菜单中显示她的专业，并隐藏另一个专业。

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

因此，如果任何“医生”具有 1 个以上的专业，则用户可以选择任何一项服务。 或者，如果用户选择了 Gynae 之类的任何服务，则下拉菜单仅显示列表中的 Gynae 顾问，例如，如果我从服务部分选择“妇科”，则上部下拉菜单仅显示那些医生姓名Gynae 顾问，或者如果我选择服务“家庭诊所”，那么它只会向我显示那些是 Gynae 顾问的医生的名字。 如果 James 博士是 Gynae 和家庭计划顾问，那么如果用户选择了 gynae，那么它也会显示 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>