请求协助实现动态关联下拉选择框（附现有代码）

没问题，我来帮你搞定这两个下拉框的动态关联功能。核心逻辑就是监听第一个下拉的选择变化，根据选中的颜色值，动态更新第二个下拉的可选选项。下面是完整的实现代码和详细说明：

1. 完整HTML结构（补全第二个下拉框初始状态） #

首先先把你提供的代码补全，第二个下拉框初始只保留占位选项：

<select name="genform[praeferenz_1]" id="genform_praeferenz_1">
  <option value="placeholder_1">Bitte wählen...</option>
  <option value="rot_1">Rot</option>
  <option value="weiss_1">Weiß</option>
  <option value="gelb_1">Gelb</option>
  <option value="blau_1">Blau</option>
</select>

<select name="genform[praeferenz_2]" id="genform_praeferenz_2">
  <option value="placeholder_2">Bitte wählen...</option>
</select>

2. JavaScript关联逻辑 #

接下来添加JavaScript代码，实现动态更新的核心功能。你可以把这段代码放在HTML的<script>标签里，或者外部JS文件中：

// 定义颜色对应的子选项映射，你可以根据实际需求修改这些选项
const colorOptionsMap = {
  rot_1: [
    { value: "dunkelrot", text: "Dunkelrot" },
    { value: "hellrot", text: "Hellrot" },
    { value: "karmesinrot", text: "Karmesinrot" }
  ],
  weiss_1: [
    { value: "schneeweiss", text: "Schneeweiß" },
    { value: "elfenbein", text: "Elfenbein" },
    { value: "cremeweiss", text: "Cremeweiß" }
  ],
  gelb_1: [
    { value: "sonnengelb", text: "Sonnengelb" },
    { value: "zitronengelb", text: "Zitronengelb" },
    { value: "goldgelb", text: "Goldgelb" }
  ],
  blau_1: [
    { value: "tiefblau", text: "Tiefblau" },
    { value: "himmelblau", text: "Himmelblau" },
    { value: "marineblau", text: "Marineblau" }
  ]
};

// 获取两个下拉框元素
const firstSelect = document.getElementById('genform_praeferenz_1');
const secondSelect = document.getElementById('genform_praeferenz_2');

// 监听第一个下拉框的选择变化事件
firstSelect.addEventListener('change', function() {
  // 清空第二个下拉框的现有选项（保留占位符）
  secondSelect.innerHTML = '<option value="placeholder_2">Bitte wählen...</option>';
  
  // 获取当前选中的颜色值
  const selectedColor = this.value;
  
  // 如果选中的是占位符，直接返回
  if (selectedColor === 'placeholder_1') return;
  
  // 根据选中的颜色，获取对应的子选项列表
  const subOptions = colorOptionsMap[selectedColor];
  
  // 循环添加子选项到第二个下拉框
  subOptions.forEach(option => {
    const newOption = document.createElement('option');
    newOption.value = option.value;
    newOption.textContent = option.text;
    secondSelect.appendChild(newOption);
  });
});

3. 功能说明 #

• 当用户在第一个下拉框选择某个颜色时，第二个下拉框会自动更新为对应颜色的细分选项；
• 如果用户切换回第一个下拉框的占位符（"Bitte wählen..."），第二个下拉框会重置为初始的占位状态；
• 你可以完全自定义colorOptionsMap里的内容，替换成你实际需要的子选项值和文本。

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