I want to make a condition in which if I select this item from 1st drop down show it shows me only selected items in 2nd drop down

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>