根据单选框值动态修改表单select元素的名称与值

首先修正你表单里的一个规范问题：三个单选框都加了checked="checked"，浏览器只会默认选中最后一个，建议只给第一个单选框保留checked属性。

接下来是实现逻辑，我们通过配置映射+事件监听的方式来实现需求，代码易维护且逻辑清晰：

核心JS实现 #

// 定义映射关系：单选框value → 对应的select配置
const packageConfig = {
  '16': { selectName: 'custom[294]', defaultOptionValue: '1182' },
  '17': { selectName: 'custom[295]', defaultOptionValue: '1183' },
  '18': { selectName: 'custom[296]', defaultOptionValue: '1184' }
};

// 获取DOM元素
const radioButtons = document.querySelectorAll('input[name="id"]');
const osSelect = document.querySelector('select.form-select');

// 页面初始化：同步默认选中单选框对应的select状态
const initialCheckedRadio = document.querySelector('input[name="id"]:checked');
if (initialCheckedRadio) {
  const config = packageConfig[initialCheckedRadio.value];
  osSelect.name = config.selectName;
  osSelect.value = config.defaultOptionValue;
}

// 监听单选框切换事件
radioButtons.forEach(radio => {
  radio.addEventListener('change', function() {
    const config = packageConfig[this.value];
    if (config) {
      // 更新select的name属性
      osSelect.name = config.selectName;
      // 设置select默认选中值
      osSelect.value = config.defaultOptionValue;
    }
  });
});

修正后的完整表单代码 #

<form action="?cmd=cart" method="post">
  <input type="hidden" name="make" value="order" />
  <input type="hidden" name="cycle" value="m" />

  <label for="id" class="styled">Package</label>
  <!-- 修正：仅保留第一个单选框的checked属性 -->
  <input class="btn-check" type="radio" checked="checked" name="id" value="16" />
  <input class="btn-check" type="radio" name="id" value="17" />
  <input class="btn-check" type="radio" name="id" value="18" />

  <label for="custom[294]" class="styled">OS</label>
  <select name="custom[294]" class="form-select">
    <option value="default_option">Select</option>
    <option data-val="1182" value="1182">CentOS 7</option>
    <option data-val="1183" value="1183">CentOS 8 Stream</option>
    <option data-val="1188" value="1188">CentOS 9 Stream</option>
    <!-- 补充单选框18对应的选项，否则设置value=1184会无效 -->
    <option data-val="1184" value="1184">对应OS选项</option>
  </select>

  <input type="submit">
</form>

<script>
// 定义映射关系：单选框value → 对应的select配置
const packageConfig = {
  '16': { selectName: 'custom[294]', defaultOptionValue: '1182' },
  '17': { selectName: 'custom[295]', defaultOptionValue: '1183' },
  '18': { selectName: 'custom[296]', defaultOptionValue: '1184' }
};

// 获取DOM元素
const radioButtons = document.querySelectorAll('input[name="id"]');
const osSelect = document.querySelector('select.form-select');

// 页面初始化：同步默认选中单选框对应的select状态
const initialCheckedRadio = document.querySelector('input[name="id"]:checked');
if (initialCheckedRadio) {
  const config = packageConfig[initialCheckedRadio.value];
  osSelect.name = config.selectName;
  osSelect.value = config.defaultOptionValue;
}

// 监听单选框切换事件
radioButtons.forEach(radio => {
  radio.addEventListener('change', function() {
    const config = packageConfig[this.value];
    if (config) {
      // 更新select的name属性
      osSelect.name = config.selectName;
      // 设置select默认选中值
      osSelect.value = config.defaultOptionValue;
    }
  });
});
</script>

关键细节说明 #

1. 配置映射：把产品与select的对应关系集中在一个对象里，后续修改需求只需调整这个对象，无需改动业务逻辑代码。
2. 初始化同步：页面加载时就根据默认选中的单选框设置select的初始状态，避免状态不一致。
3. 选项补充：你提到单选框值18时要选中value=1184，但原表单中没有这个选项，必须补充对应的<option>标签，否则设置选中值会失效。

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