基于select选项选择对应数组存储数据的最优实现方案咨询

核心解决方案：用对象统一管理数组 #

你现在单独声明每个车型的数组，没法通过选择的名称直接访问，换成对象存储所有车型数组就能解决问题——对象的键对应车型名称，值对应颜色数组，直接用选择的车型名称作为键就能动态操作对应数组，哪怕有60个车型也不用写一堆if判断。

修改后的完整代码 #

HTML（无需改动，可直接扩展车型选项）

<select id="car">
  <option value="BMW">BMW</option>
  <option value="VW">VW</option>
  <!-- 新增车型直接加<option>即可 -->
</select>

<input id="colour" />
<button onclick="storeCar()">添加颜色</button> <!-- 加触发按钮方便测试 -->

JavaScript

// 用对象统一管理所有车型的颜色数组，新增车型直接在这里加键值对
const carColours = {
  BMW: [],
  VW: []
  // 示例：新增丰田 Toyota: []
};

function storeCar() {
  const carChoice = document.getElementById("car").value;
  const colourChoice = document.getElementById("colour").value;

  // 可选判断：确保选择的车型在对象中存在，避免报错
  if (carColours.hasOwnProperty(carChoice)) {
    carColours[carChoice].push(colourChoice);
    // 清空输入框方便继续输入
    document.getElementById("colour").value = "";
  }

  // 测试用：打印当前数组状态
  console.log("BMW数组:", carColours.BMW);
  console.log("VW数组:", carColours.VW);
}

比如选择BMW并依次输入Blue、Blue、Red后，carColours.BMW就会变成["Blue","Blue","Red"]，完全符合你的预期。

同步到Google Sheet（GAS环境） #

要把各车型的颜色数量和列表同步到表格，可遍历carColours对象整理数据后写入Sheet：

// GAS服务器端函数，前端可通过google.script.run调用
function syncToSheet() {
  // 这里可接收前端传来的carColours数据，或直接在GAS中维护该对象
  const carColours = { BMW: ["Blue","Blue","Red"], VW: ["Green","Yellow"] };
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
  
  // 整理表格数据：表头+各车型条目
  const data = [["Car Choice", "Count", "Colours"]];
  for (const car in carColours) {
    const colours = carColours[car];
    data.push([car, colours.length, colours.join(", ")]);
  }

  // 清空旧数据并写入新内容
  sheet.clearContents();
  sheet.getRange(1, 1, data.length, data[0].length).setValues(data);
}

执行后Sheet会生成你需要的格式：

扩展说明 #

• 新增车型时，只需要在carColours对象里加对应的键值对（比如Toyota: []），同时在HTML的<select>里加<option value="Toyota">Toyota</option>即可，完全不用修改逻辑代码。
• 前端与GAS的通信可通过google.script.run将前端的carColours数据传到服务器端，根据业务场景选择数据维护方式即可。

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