如何在单页多表单中修改选项并复用脚本更新对应按钮链接？

要实现多组select与button的联动，仅更新对应按钮的链接，核心是给每组建立独立关联，避免批量操作所有按钮。以下是两种简洁的实现方式：

方法一：利用父容器分组推荐 #

通过将每组select和button放在同一个父容器内，借助DOM层级关系精准定位对应按钮：

HTML结构 #

<!-- 第一组 -->
<div class="select-btn-group">
  <select class="link-select">
    <option value="https://example.com/opt1">选项1</option>
    <option value="https://example.com/opt2">选项2</option>
    <option value="https://example.com/opt3">选项3</option>
  </select>
  <a href="#" class="action-btn">跳转</a>
</div>

<!-- 第二组 -->
<div class="select-btn-group">
  <select class="link-select">
    <option value="https://test.com/a">选项A</option>
    <option value="https://test.com/b">选项B</option>
    <option value="https://test.com/c">选项C</option>
  </select>
  <a href="#" class="action-btn">跳转</a>
</div>

<!-- 第三组 -->
<div class="select-btn-group">
  <select class="link-select">
    <option value="https://demo.com/x">选项X</option>
    <option value="https://demo.com/y">选项Y</option>
    <option value="https://demo.com/z">选项Z</option>
  </select>
  <a href="#" class="action-btn">跳转</a>
</div>

JavaScript脚本 #

// 获取所有下拉选择框
const selects = document.querySelectorAll('.link-select');

selects.forEach(select => {
  // 绑定选项变更事件
  select.addEventListener('change', function() {
    // 找到当前select所在组的对应按钮
    const targetBtn = this.closest('.select-btn-group').querySelector('.action-btn');
    // 更新按钮链接
    targetBtn.href = this.value;
  });

  // 页面加载时初始化按钮链接为当前选中值
  const initBtn = select.closest('.select-btn-group').querySelector('.action-btn');
  initBtn.href = select.value;
});

方法二：利用data属性绑定 #

通过给select设置data-target属性指定对应按钮的ID，直接定位目标按钮：

HTML结构 #

<select class="link-select" data-target="btn1">
  <option value="https://example.com/opt1">选项1</option>
  <option value="https://example.com/opt2">选项2</option>
</select>
<a href="#" id="btn1" class="action-btn">跳转</a>

<select class="link-select" data-target="btn2">
  <option value="https://test.com/a">选项A</option>
  <option value="https://test.com/b">选项B</option>
</select>
<a href="#" id="btn2" class="action-btn">跳转</a>

JavaScript脚本 #

const selects = document.querySelectorAll('.link-select');

selects.forEach(select => {
  select.addEventListener('change', function() {
    const btnId = this.dataset.target;
    const targetBtn = document.getElementById(btnId);
    targetBtn.href = this.value;
  });

  // 初始化链接
  const initBtn = document.getElementById(select.dataset.target);
  initBtn.href = select.value;
});

两种方式都能复用同一段脚本，仅更新当前选中select对应的按钮链接，不会影响其他组。

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