如何实现表单医生与服务两个下拉框的双向联动筛选功能

前置说明 #

你提供的原始HTML存在一处语法错误：Dr. Sarah对应的<option>标签的value属性缺少闭合双引号，我已经在下方代码中修复了该问题。

实现思路 #

• 预先定义医生与对应资质服务的映射关系，作为联动过滤的判断依据
• 分别监听两个下拉框的change触发事件
• 事件触发后，根据当前选中值动态生成另一个下拉框的可选选项，默认始终保留「请选择」占位选项

完整可运行代码 #

<!-- 医生下拉框 -->
<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>

<script>
// 定义医生与对应服务的映射关系
const doctorServiceMap = [
    {
        name: 'Dr. Sarah (Gynaecologist)',
        services: ['Gynaecology']
    },
    {
        name: 'Dr. James (Gynaecologist & Family Planner Consultant)',
        services: ['Gynaecology', 'Family Planing Clinic']
    }
]

const doctorSelect = document.getElementById('doctors');
const serviceSelect = document.getElementById('service');

// 保存原始全量选项，用于重置场景
const allDoctorOptions = Array.from(doctorSelect.options).slice(1);
const allServiceOptions = Array.from(serviceSelect.options).slice(1);

// 医生下拉框change事件：过滤服务选项
doctorSelect.addEventListener('change', function() {
    const selectedDoctor = this.value;
    // 先重置服务下拉框，保留默认占位选项
    serviceSelect.innerHTML = '<option value="No Service Selected">Select Your Services</option>';
    
    if (selectedDoctor === 'No Doctor Selected') {
        // 重置为全量服务选项
        allServiceOptions.forEach(option => serviceSelect.appendChild(option.cloneNode(true)));
        return;
    }

    // 匹配当前选中医生的可提供服务
    const matchedDoctor = doctorServiceMap.find(item => item.name === selectedDoctor);
    if (matchedDoctor) {
        matchedDoctor.services.forEach(service => {
            const option = document.createElement('option');
            option.value = service;
            option.textContent = service;
            serviceSelect.appendChild(option);
        })
    }
})

// 服务下拉框change事件：过滤医生选项
serviceSelect.addEventListener('change', function() {
    const selectedService = this.value;
    // 先重置医生下拉框，保留默认占位选项
    doctorSelect.innerHTML = '<option value="No Doctor Selected">Select Your Doctor</option>';
    
    if (selectedService === 'No Service Selected') {
        // 重置为全量医生选项
        allDoctorOptions.forEach(option => doctorSelect.appendChild(option.cloneNode(true)));
        return;
    }

    // 匹配所有可提供当前选中服务的医生
    const matchedDoctors = doctorServiceMap.filter(item => item.services.includes(selectedService));
    matchedDoctors.forEach(doctor => {
        const option = document.createElement('option');
        option.value = doctor.name;
        option.textContent = doctor.name;
        doctorSelect.appendChild(option);
    })
})
</script>

功能效果说明 #

完全符合你提出的双向联动需求：

1. 选中Dr. Sarah时，服务下拉仅显示Gynaecology选项；选中Dr. James时，服务下拉显示Gynaecology和Family Planing Clinic两个选项
2. 选中Gynaecology服务时，医生下拉同时显示Dr. Sarah和Dr. James；选中Family Planing Clinic服务时，医生下拉仅显示Dr. James
3. 任意下拉框选择回「请选择」选项时，另一个下拉框自动恢复为全量可选状态

内容的提问来源于stack exchange，提问作者Zain Kamran