我想做一個條件，如果我從第一個下拉列表中選擇這個項目，它會只顯示我在第二個下拉列表中選擇的項目

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>