如何实现主下拉菜单联动切换子下拉菜单选项（健身卡片开发）

嘿，兄弟，我帮你搞定这个联动下拉菜单的功能！作为健身爱好者+JS开发者，这个需求太懂了😎。咱们一步步来，先把你的代码补全并实现联动效果：

先把肌群和对应的动作整理成一个对象，这样方便后续联动时快速查找：

// 定义肌群与对应动作的映射关系
const workoutData = {
  "胸部": ["平板卧推", "上斜卧推", "双杠臂屈伸", "夹胸器"],
  "肩部": ["哑铃推举", "侧平举", "前平举", "俯身飞鸟"],
  "背部": ["引体向上", "高位下拉", "划船", "硬拉"],
  "腿部": ["深蹲", "腿举", "腿屈伸", "腿弯举"],
  "手臂": ["弯举", "臂屈伸", "锤式弯举", "绳索下压"]
};

把你表格里的"dropdown"替换成真正的<select>元素，给主下拉（肌群）和子下拉（动作）加上类名，方便JS批量操作：

<html>
<link rel="stylesheet" type="text/css" href="scratch.css">
<header>
</header>
<body>
<h1>SNAP YA MF WORKOUT & SEND TO YA HOMIES!</h1>
<table id="first">
  <tr>
    <th>Lift（肌群）</th>
    <th>Weight（重量）</th>
    <th>Exercise（动作）</th>
  </tr>
  <tr>
    <!-- 主下拉：选择肌群 -->
    <td><select class="muscle-group-select"></select></td>
    <td><input type="number" placeholder="输入重量"></td>
    <!-- 子下拉：显示对应动作 -->
    <td><select class="exercise-select"></select></td>
  </tr>
</table>
<div id="t1button">
  <button onclick="myFunction()">+</button>
</div>
<div id="t1pre">
  <button onclick="preFunction()">-</button>
</div>
<script type="text/javascript">
// 这里写JS逻辑
</script>
</body>
</html>

注：我把表头的"no idea"改成了"Exercise"，更贴合健身场景，你可以按需调整~

现在写核心的JS功能，包括初始化下拉菜单、联动更新、新增行的处理：

// 定义训练数据
const workoutData = {
  "胸部": ["平板卧推", "上斜卧推", "双杠臂屈伸", "夹胸器"],
  "肩部": ["哑铃推举", "侧平举", "前平举", "俯身飞鸟"],
  "背部": ["引体向上", "高位下拉", "划船", "硬拉"],
  "腿部": ["深蹲", "腿举", "腿屈伸", "腿弯举"],
  "手臂": ["弯举", "臂屈伸", "锤式弯举", "绳索下压"]
};

// 页面加载完成后初始化所有下拉菜单
window.onload = function() {
  // 初始化第一行的下拉菜单
  initDropdowns(document.querySelector(".muscle-group-select"));
};

// 初始化单个肌群下拉菜单的选项
function initDropdowns(muscleSelect) {
  // 清空原有选项
  muscleSelect.innerHTML = "";
  
  // 添加默认提示选项
  const defaultOption = document.createElement("option");
  defaultOption.value = "";
  defaultOption.textContent = "选择肌群";
  muscleSelect.appendChild(defaultOption);
  
  // 遍历肌群数据，添加选项
  Object.keys(workoutData).forEach(muscle => {
    const option = document.createElement("option");
    option.value = muscle;
    option.textContent = muscle;
    muscleSelect.appendChild(option);
  });
  
  // 绑定联动事件
  muscleSelect.addEventListener("change", function() {
    updateExerciseDropdown(this);
  });
  
  // 初始化对应的动作下拉菜单
  updateExerciseDropdown(muscleSelect);
}

// 根据选中的肌群更新动作下拉菜单
function updateExerciseDropdown(muscleSelect) {
  // 获取当前行的动作下拉菜单
  const exerciseSelect = muscleSelect.parentElement.parentElement.querySelector(".exercise-select");
  const selectedMuscle = muscleSelect.value;
  
  // 清空原有选项
  exerciseSelect.innerHTML = "";
  
  if (!selectedMuscle) {
    // 如果没选肌群，显示提示
    const defaultOption = document.createElement("option");
    defaultOption.value = "";
    defaultOption.textContent = "请先选肌群";
    exerciseSelect.appendChild(defaultOption);
    return;
  }
  
  // 添加选中肌群对应的动作选项
  workoutData[selectedMuscle].forEach(exercise => {
    const option = document.createElement("option");
    option.value = exercise;
    option.textContent = exercise;
    exerciseSelect.appendChild(option);
  });
}

// 新增行的函数（修改你的myFunction）
function myFunction() {
  const table = document.getElementById("first");
  const tr = document.createElement("tr");
  
  // 创建肌群下拉单元格
  const muscleTd = document.createElement("td");
  const muscleSelect = document.createElement("select");
  muscleSelect.className = "muscle-group-select";
  muscleTd.appendChild(muscleSelect);
  
  // 创建重量输入单元格
  const weightTd = document.createElement("td");
  const weightInput = document.createElement("input");
  weightInput.type = "number";
  weightInput.placeholder = "输入重量";
  weightTd.appendChild(weightInput);
  
  // 创建动作下拉单元格
  const exerciseTd = document.createElement("td");
  const exerciseSelect = document.createElement("select");
  exerciseSelect.className = "exercise-select";
  exerciseTd.appendChild(exerciseSelect);
  
  // 添加到行里，再添加到表格
  tr.appendChild(muscleTd);
  tr.appendChild(weightTd);
  tr.appendChild(exerciseTd);
  table.appendChild(tr);
  
  // 初始化新行的下拉菜单
  initDropdowns(muscleSelect);
}

// 删除行的函数（补全你的preFunction）
function preFunction() {
  const table = document.getElementById("first");
  // 至少保留表头+1行数据
  if (table.rows.length > 2) {
    table.deleteRow(table.rows.length - 1);
  }
}

• 页面加载后，第一行的肌群下拉会自动填充所有选项，动作下拉默认显示提示
• 选中某个肌群后，对应的动作下拉会立刻更新为该肌群的训练动作，无关动作完全隐藏
• 点击+按钮新增的行，同样具备完整的联动功能
• 点击-按钮可以删除最后一行（保留至少一行训练项）

你可以根据自己的需求修改workoutData里的肌群和动作，比如添加更多动作或者调整肌群名称~

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