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

Question

If I want to select a doctor's name from my form drop-down so it only shows his/her specialty on the second drop-down below that. For example, Dr. Sarah is Gynaecologist so when I select her name from the drop-down menu so it only shows her specialty down in the second drop-down and hides another specialty.

And for example, if I select Dr. James and he is Gynaecologist & a Family Planner consultant, the Drop-down menu below should show Gynae & Family Planning clinic service and nothing else.

So the user can select any one of the services if any "Doctor" has more than 1 specialty. Or if the user selects any service like Gynae so the drop-down menu only shows Gynae consultants in the list, For example, if I select "Gynaecology" from the service section so the upper drop-down only shows me those doctors names which are Gynae consultant or if I select Service "Family Clinic" so it shows me only those doctors name which is Gynae consultant. If Dr. James are Gynae and Family planner consultant so if the user selects gynae so it shows Dr. James name also with Dr. 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

I don't know if this is exactly what you were looking for but you can go on this basis

 $('#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>