调整Google Apps Script联动下拉框：将Median Salary改为标签展示

要实现选择Job Title后直接显示对应中位数薪资，只需做以下几处修改：

1. 修改HTML页面：移除薪资下拉框，添加显示标签 #

把原来用于Median Salary的<select>元素删掉，替换成一个用于展示薪资的容器，比如：

<!-- 替换原Median Salary下拉框 -->
<div id="medianSalaryDisplay" style="margin-top: 10px; padding: 8px; border: 1px solid #ddd; border-radius: 4px; min-height: 24px;">
  请选择职位查看薪资
</div>

2. 修改前端JavaScript逻辑：监听职位选择，直接请求并显示薪资 #

修改原来的联动逻辑，当Job Title下拉框的选项变化时，直接调用后端脚本获取对应薪资，然后更新显示容器：

// 假设你的Job Title下拉框id是"jobTitle"
document.getElementById("jobTitle").addEventListener("change", function() {
  const selectedJob = this.value;
  if (!selectedJob) {
    document.getElementById("medianSalaryDisplay").textContent = "请选择职位查看薪资";
    return;
  }
  
  // 调用Google Apps Script后端函数获取薪资
  google.script.run
    .withSuccessHandler(function(salary) {
      document.getElementById("medianSalaryDisplay").textContent = `中位数薪资: ${salary}`;
    })
    .withFailureHandler(function(error) {
      document.getElementById("medianSalaryDisplay").textContent = "获取薪资失败: " + error;
    })
    .getMedianSalary(selectedJob); // 这个函数需要在后端实现
});

3. 实现Google Apps Script后端函数：根据职位查询薪资 #

在你的.gs文件中添加一个函数，用于根据传入的职位名称查询对应的中位数薪资：

function getMedianSalary(jobTitle) {
  // 这里替换成你的数据源获取逻辑，比如从Google Sheets读取
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("你的数据表名");
  const data = sheet.getDataRange().getValues();
  
  // 遍历数据找到对应职位的薪资
  for (let i = 1; i < data.length; i++) { // 假设第一行是表头
    if (data[i][0] === jobTitle) { // 假设职位在第一列，薪资在第二列，根据你的实际结构调整
      return data[i][1];
    }
  }
  return "未找到对应薪资";
}

关键说明 #

• 确保前端下拉框的id和代码中一致，比如Job Title下拉框的id是jobTitle，显示容器的id是medianSalaryDisplay。
• 后端函数中的数据列索引、表名要和你的实际数据源匹配，避免查询错误。
• 使用google.script.run的withSuccessHandler和withFailureHandler可以处理请求成功或失败的情况，提升用户体验。

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