如何基于下拉列表选中值动态设置单选按钮组的标签

要实现该需求，只需要给三个下拉框添加值变化监听事件，每次选择变更时同步更新单选按钮的标签文本即可，完整可运行代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>动态修改单选按钮标签</title>
</head>
<body>
<div style="float:left;margin-right:20px;">
  <h5>Object</h5>
  <select name="object" id="object">
    <option value="q-tip">q-tip</option>
    <option value="o2">o2</option>
  </select>
</div>

<div style="float:left;margin-right:20px;">
  <h5>Action</h5>
  <select name="action" id="action">
    <option value="hold">hold</option>
    <option value="a2">a2</option>
  </select>
</div>

<div style="float:left;margin-right:20px;">
  <h5>Person</h5>
  <select name="humann" id="human">
    <option value="h1">h1</option>
    <option value="h2">h2</option>
  </select>
</div>

<div style="clear:both;padding-top:20px;">
<fieldset>
  <legend>Direction</legend>
  <input type="radio" name="direction" value="towards">
  <span id="dirTowardsLabel">q-tip hold h1</span><br>
  <input type="radio" name="direction" value="away">
  <span id="dirAwayLabel">h1 hold q-tip</span><br>
</fieldset>
</div>

<script>
// 获取所有DOM元素
const objSelect = document.getElementById('object');
const actionSelect = document.getElementById('action');
const humanSelect = document.getElementById('human');
const dirTowardsLabel = document.getElementById('dirTowardsLabel');
const dirAwayLabel = document.getElementById('dirAwayLabel');

// 定义更新标签的函数
function updateRadioLabels() {
  const objVal = objSelect.value;
  const actionVal = actionSelect.value;
  const humanVal = humanSelect.value;
  // 拼接两个单选的标签文本
  dirTowardsLabel.textContent = `${objVal} ${actionVal} ${humanVal}`;
  dirAwayLabel.textContent = `${humanVal} ${actionVal} ${objVal}`;
}

// 给三个下拉框绑定值变化事件
objSelect.addEventListener('change', updateRadioLabels);
actionSelect.addEventListener('change', updateRadioLabels);
humanSelect.addEventListener('change', updateRadioLabels);
</script>
</body>
</html>

实现说明 #

1. 为了方便定位修改单选按钮后的文本，给原本的纯文本节点外层包裹了span标签并设置专属id
2. 编写统一的标签更新函数，每次触发时先读取三个下拉框的当前选中值，按照规则拼接后赋值给两个span的文本内容
3. 给三个下拉框都绑定change事件，只要任意一个下拉框的选中值发生变化，就触发标签更新函数，实现实时同步效果

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