如何实现父下拉选项切换时子选项联动（Bootstrap/jQuery/原生JS）

需求说明 #

需实现父级下拉选单切换时，对应子选项组同步显示/切换的功能——目前仅选择「Real Estate」时能显示对应的单选组，切换到其他行业选项时无法同步更新子选项。

实现方案 #

以下提供三种可行方案，可根据项目环境选择：

1. 原生JavaScript实现（无依赖） #

先补充完整所有行业对应的子选项组HTML结构，给每个子选项组添加唯一类名（格式为行业小写-连字符-services），统一保留js-show-service类和初始隐藏类dis-none：

<!-- 父下拉选单 -->
<div class="wrap-input100 input100-select bg1">
    <span class="label-input100">Industry *</span>
    <div>
        <select class="js-select2" name="service">
            <option>Please choose</option>
            <option>Real Estate</option>
            <option>Construction</option>
            <option>Technology</option>
            <option>Food</option>
            <option>Entertainment</option>
            <option>Fashion</option>
            <option>General Contract</option>
        </select>
        <div class="dropDownSelect2"></div>
    </div>
</div>

<!-- 房地产子选项 -->
<div class="w-full dis-none js-show-service real-estate-services">
    <div class="wrap-contact100-form-radio">
        <span class="label-input100">What service do you need?</span>
        <div class="contact100-form-radio m-t-15">
            <input class="input-radio100" id="radio1" type="radio" name="type-product" value="physical" checked="checked">
            <label class="label-radio100" for="radio1">Buying</label>
        </div>
        <div class="contact100-form-radio">
            <input class="input-radio100" id="radio2" type="radio" name="type-product" value="digital">
            <label class="label-radio100" for="radio2">Selling</label>
        </div>
        <div class="contact100-form-radio">
            <input class="input-radio100" id="radio3" type="radio" name="type-product" value="service">
            <label class="label-radio100" for="radio3">Renting</label>
        </div>
    </div>
</div>

<!-- 建筑行业子选项 -->
<div class="w-full dis-none js-show-service construction-services">
    <div class="wrap-contact100-form-radio">
        <span class="label-input100">What service do you need?</span>
        <div class="contact100-form-radio m-t-15">
            <input class="input-radio100" id="radio4" type="radio" name="type-product" value="construction1" checked="checked">
            <label class="label-radio100" for="radio4">Design</label>
        </div>
        <div class="contact100-form-radio">
            <input class="input-radio100" id="radio5" type="radio" name="type-product" value="construction2">
            <label class="label-radio100" for="radio5">Construction</label>
        </div>
        <div class="contact100-form-radio">
            <input class="input-radio100" id="radio6" type="radio" name="type-product" value="construction3">
            <label class="label-radio100" for="radio6">Maintenance</label>
        </div>
    </div>
</div>

<!-- 其他行业子选项组按相同格式补充 -->

添加原生JS逻辑：

// 获取父下拉选单和所有子选项组
const parentSelect = document.querySelector('.js-select2');
const serviceGroups = document.querySelectorAll('.js-show-service');

// 监听下拉选单变化
parentSelect.addEventListener('change', function() {
    // 先隐藏所有子选项组
    serviceGroups.forEach(group => group.classList.add('dis-none'));
    
    // 匹配当前选中项对应的子选项组
    const selectedIndustry = this.value.toLowerCase().replace(/\s+/g, '-');
    const targetGroup = document.querySelector(`.${selectedIndustry}-services`);
    
    // 显示匹配的子选项组
    if (targetGroup) targetGroup.classList.remove('dis-none');
});

2. jQuery实现（简洁高效） #

同样先补充完整子选项组HTML结构，然后添加jQuery代码：

$(document).ready(function() {
    $('.js-select2').on('change', function() {
        // 隐藏所有子选项组
        $('.js-show-service').addClass('dis-none');
        
        // 匹配并显示对应子选项组
        const selectedClass = $(this).val().toLowerCase().replace(/\s+/g, '-') + '-services';
        $(`.${selectedClass}`).removeClass('dis-none');
    });
});

3. 结合Bootstrap Collapse组件 #

Bootstrap本身无现成联动组件，但可借助collapse类实现，本质仍为JS控制显示隐藏：

<!-- 父下拉选单，给选项添加data-target关联子选项组ID -->
<div class="wrap-input100 input100-select bg1">
    <span class="label-input100">Industry *</span>
    <div>
        <select class="js-select2 form-select" name="service">
            <option>Please choose</option>
            <option data-target="#realEstateServices">Real Estate</option>
            <option data-target="#constructionServices">Construction</option>
            <!-- 其他选项添加对应data-target -->
        </select>
        <div class="dropDownSelect2"></div>
    </div>
</div>

<!-- 房地产子选项组，用Bootstrap collapse类 -->
<div class="w-full collapse js-show-service" id="realEstateServices">
    <!-- 内容同前 -->
</div>

<!-- 建筑子选项组 -->
<div class="w-full collapse js-show-service" id="constructionServices">
    <!-- 内容同前 -->
</div>

对应JS逻辑（原生JS示例）：

const parentSelect = document.querySelector('.js-select2');
parentSelect.addEventListener('change', function() {
    // 隐藏所有collapse组件
    document.querySelectorAll('.js-show-service').forEach(collapse => {
        new bootstrap.Collapse(collapse, { toggle: false }).hide();
    });
    
    // 显示选中项对应的collapse组件
    const targetId = this.options[this.selectedIndex].dataset.target;
    if (targetId) new bootstrap.Collapse(targetId, { toggle: false }).show();
});

额外注意事项 #

• 若使用Select2插件（代码中有js-select2类），需监听Select2专属事件select2:select而非原生change事件，避免触发异常：

// 原生JS监听Select2事件
document.querySelector('.js-select2').addEventListener('select2:select', function(e) {
    const selectedIndustry = e.params.data.text.toLowerCase().replace(/\s+/g, '-');
    // 后续逻辑同前
});

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