如何实现下拉选择器选值后显示对应div并优化代码可扩展性

核心优化逻辑 #

• 给所有需要控制显隐的关联div添加统一类名，切换选项时先批量隐藏所有关联div，解决旧内容不消失的问题
• 通过下拉框选中值动态拼接对应div的ID，无需写多分支if判断，新增选项不需要修改JS/CSS代码，扩展性极强

优化后代码 #

CSS代码 #

/* 统一控制所有关联div默认隐藏，后续新增选项无需修改CSS */
.option-content {
    display: none;
}

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-12">
    <select id="selectoption">
        <option value="0">Option 1</option>
        <option value="1">Option 2</option>
        <option value="2">Option 3</option>
        <!-- 后续新增选项只需要在这里加对应value的option即可 -->
    </select>
</div>

<div class="row">
    <div class="col-4">
        <!-- 新增统一类名 option-content -->
        <div id="option0" class="option-content">
            <p class="content">Lorem ipsum... Example...</p>
        </div>
    </div>

    <div class="col-4">
        <div id="option1" class="option-content">
            <p class="content">Lorem ipsum... Example...</p>
        </div>
    </div>

    <div class="col-4">
        <div id="option2" class="option-content">
            <p class="content">Lorem ipsum... Example...</p>
        </div>
    </div>
    <!-- 后续新增关联div只需要保证id为option+对应value、带option-content类即可 -->
</div>

JS代码 #

$(document).ready(function(){
    // 提前缓存所有关联div元素，减少DOM查询开销
    const $allOptionDiv = $('.option-content');
    $('#selectoption').on('change', function() {
        // 先隐藏所有关联div
        $allOptionDiv.hide();
        // 动态匹配当前选中值对应的div，直接显示，无任何判断分支
        $(`#option${this.value}`).show();
    }).trigger('change'); // 主动触发一次变更，页面加载时默认显示当前选中项对应的内容
});

扩展说明 #

后续新增N个选项时，仅需要在HTML中新增对应option和关联div即可，CSS和JS代码无需任何调整，完全适配任意数量的选项场景。

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