选择select下拉option时切换对应按钮链接显示的脚本如何编写

云原生阿岚

2026-10-3

实现步骤

你只需要给原有HTML补充少量标识，再配合CSS和原生JS即可实现需求，不需要引入第三方依赖：

1. 修改后的HTML代码

给下拉框加id方便元素获取，同时给第一个选项加selected属性实现默认选中：

<p>My html code</p>
<select id="pricingCycle">
<option selected>monthly</option>
<option>annually</option>
<option>triennially</option>
</select>

<div class="pricing-btn">
    <a href="<?php echo $ButtonLink1; ?>" class="btn"> Get started</a>
</div>
<div class="pricing-btn">
    <a href="<?php echo $ButtonLink2; ?>" class="btn"> Get started</a>
</div>
<div class="pricing-btn">
    <a href="<?php echo $ButtonLink3; ?>" class="btn"> Get started</a>
</div>

2. 补充CSS样式

默认隐藏所有按钮容器，避免页面加载时出现闪烁：

.pricing-btn {
    display: none;
}

3. 加入JS脚本

直接放在页面底部，或者放在DOMContentLoaded事件回调中执行即可：

// 获取所需元素
const cycleSelect = document.getElementById('pricingCycle');
const btnContainers = document.querySelectorAll('.pricing-btn');

// 切换显示对应按钮的核心函数
function togglePricingBtn() {
    // 按选中项的索引匹配对应按钮容器，索引0对应monthly、1对应annually、2对应triennially
    const selectedIndex = cycleSelect.selectedIndex;
    // 先隐藏所有按钮容器
    btnContainers.forEach(btn => btn.style.display = 'none');
    // 仅显示选中项对应的容器
    btnContainers[selectedIndex].style.display = 'block';
}

// 页面加载完成后执行一次，保证默认显示monthly对应的按钮
document.addEventListener('DOMContentLoaded', togglePricingBtn);
// 监听下拉框切换事件，选择变化时同步更新按钮显示
cycleSelect.addEventListener('change', togglePricingBtn);