如何在Google Apps Script中创建可动态添加的依赖下拉菜单？

你的代码存在两个核心问题导致动态切换失效：

1. optionList变量被定义在if-else代码块内部，作用域仅局限于块内，外部调用createOptionsElem时会提示变量未定义
2. 切换逻辑只在创建元素时执行一次，没有监听用户选择订单类型的操作，无法实时更新产品选项

以下是修复后的完整代码，仅需修改js_script.html，其他文件保持不变：

<script>
  let counter = 0;

  const orderTypeList = ["PH", "EC"];
  const optionListPH = ["PH-Test Product 1", "PH-Test Product 2", "PH-Test Product 3"];
  const optionListEC = ["EC-Test Product 1", "EC-Test Product 2", "EC-Test Product 3"];                                   
  
  document.getElementById("addproduct").addEventListener("click", addInputField);

  function addInputField(){
    counter++;
    
    // 创建新的行容器
    const newDivElem = createElementTemplate('div', `row${counter}`, 'row');

    // 创建订单类型下拉框
    const newOrderTypeSelectElem = createElementTemplate('select', `ordertype${counter}`);
    createOptionsElem(newOrderTypeSelectElem, orderTypeList);

    // 创建产品下拉框（初始仅显示默认提示）
    const newProductSelectElem = createElementTemplate('select', `product${counter}`);
    // 添加默认提示选项
    const defaultOption = document.createElement('option');
    defaultOption.value = "";
    defaultOption.textContent = "请先选择订单类型";
    newProductSelectElem.appendChild(defaultOption);

    // 给订单类型下拉框添加change事件监听，动态更新产品选项
    newOrderTypeSelectElem.addEventListener('change', function() {
      const selectedType = this.value;
      let productOptions = [];
      
      if(selectedType === 'PH'){
        productOptions = optionListPH;
      } else if(selectedType === 'EC'){
        productOptions = optionListEC;
      }

      // 清空产品下拉框现有选项，重新生成
      newProductSelectElem.innerHTML = "";
      createOptionsElem(newProductSelectElem, productOptions);
    });

    newDivElem.appendChild(newOrderTypeSelectElem);
    newDivElem.appendChild(newProductSelectElem);

    document.getElementById('productsection').appendChild(newDivElem);
  }

function createOptionsElem(selectTag, optionsArr){
  // 添加默认提示选项
  const newDefaultOptionTag = document.createElement('option');
  newDefaultOptionTag.value = "";
  newDefaultOptionTag.textContent="选择产品"; 
  selectTag.appendChild(newDefaultOptionTag);

  // 循环添加产品选项
  for(let i = 0; i < optionsArr.length; i++){
    const newOptionTag = document.createElement('option');
    newOptionTag.textContent = optionsArr[i];
    newOptionTag.value = optionsArr[i];
    selectTag.appendChild(newOptionTag);
  }
}

// 创建元素的工具函数
function createElementTemplate(tagType, idVal, className){
  const newElement = document.createElement(tagType);
  
  if(idVal !== undefined)
    newElement.id = idVal;
  
  if(className !== undefined)
    newElement.classList.add(className);

  return newElement;
}
</script>

关键修改说明： #

• 移除了原代码中无效的if-else块，改为在change事件监听中处理产品选项的切换
• 给每个订单类型下拉框绑定了change事件，用户选择时实时触发产品列表更新
• 修改了createOptionsElem函数，每次生成选项前会先清空下拉框（通过innerHTML = ""），避免重复添加选项
• 初始化产品下拉框时显示"请先选择订单类型"的提示，引导用户操作
• 替换了原代码中for...in循环为for循环，避免遍历数组时可能出现的原型链问题

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