动态添加时如何创建依赖下拉列表？

Question

如何在Google AppsScript中创建动态依赖下拉列表？ 我想要实现的是，当我在order type中选择PH时，产品选择下拉列表应该有['PH-Test Product 1', 'PH-Test Product 2', 'PH-Test Product 3']选项。 当我选择EC时，它应该有['EC-Test Product 1', 'EC-Test Product 2', 'EC-Test Product 3'] 。

这是我的代码-

form.html

<head>
 <base target="_top">
 <?!= include('css_script'); ?>
</head>
<body>
 <div class="container">    
  <div class = "row">
   <h1>A Sample Form</h1>
  </div>
      
  <div id="productsection"></div>
  <div class = "row">   
   <button id="addproduct">Add Product</button>
  </div>                                    <!-- end of row -->
 </div>
 <?!= include('js_script'); ?>
</body>

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++;
    
    // creates a new div of class row
    const newDivElem = createElementTemplate('div', `row${counter}`, 'row');

    // creates a new select tag for order type dropdown
    const newOrderTypeSelectElem = createElementTemplate('select', `ordertype${counter}`);

    // function that populates the dropdown for products and is inserted to the above "ordertypeX" select tag
    createOptionsElem(newOrderTypeSelectElem, orderTypeList);

    // creates a new select tag for product dropdown
    const newProductSelectElem = createElementTemplate('select', `product${counter}`);
    
    // Code to switch options depending on ordertype
    //------------------------- Does Not Work --------------------------
    if(document.getElementById(`ordertype${counter}`).value === 'PH'){
      const optionList = optionListPH;
    }else{
      const optionList = optionListEC;
    }
    //------------------------------------------------------------------

    
    // generates the content of the dropdown for products and is inserted to the above "productX" select tag
    createOptionsElem(newProductSelectElem, optionList);
    
    newDivElem.appendChild(newOrderTypeSelectElem);
    newDivElem.appendChild(newProductSelectElem);

    // Finally, appends the newly created div tag to the productSection tag.
    document.getElementById('productsection').appendChild(newDivElem);
  }

function createOptionsElem(selectTag, optionsArr){
  const newDefaultOptionTag = document.createElement('option');
  newDefaultOptionTag.value = "";
  // newDefaultOptionTag.select = false;
  newDefaultOptionTag.textContent="Choose your option"; 
  for(let i in optionsArr){
    const newOptionTag = document.createElement('option');
    newOptionTag.textContent = optionsArr[i];
    newOptionTag.value = optionsArr[i];

    // Inserts the option tag in select tag
    selectTag.appendChild(newOptionTag);
  }
}

// function to create a new element
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>

css_script.html

<style>
 .row{
   margin-top: 5px;
   margin-bottom: 5px;
 }
</style>

Code.gs

function doGet(e) {
  Logger.log(e);
  return HtmlService.createTemplateFromFile('form_basic').evaluate();
}

function include(fileName){
  return HtmlService.createHtmlOutputFromFile(fileName).getContent();
}

Answer 1

修改点：

在您的脚本中，单击按钮时，将创建 2 个下拉列表。 通过这个，在下面的脚本中，
```
 if(document.getElementById(`ordertype${counter}`).value === 'PH'){ const optionList = optionListPH; }else{ const optionList = optionListEC; }
```
- 对于您的脚本， optionListPH始终用于第一个下拉列表。
而且，当您想通过更改第一个下拉列表来更改第二个下拉列表时，需要添加更多脚本来检查它。

当这些点都体现在你的脚本中时，下面的修改怎么样？

从：

// Code to switch options depending on ordertype
//------------------------- Does Not Work --------------------------
if(document.getElementById(`ordertype${counter}`).value === 'PH'){
  const optionList = optionListPH;
}else{
  const optionList = optionListEC;
}
//------------------------------------------------------------------


// generates the content of the dropdown for products and is inserted to the above "productX" select tag
createOptionsElem(newProductSelectElem, optionList);

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

// Finally, appends the newly created div tag to the productSection tag.
document.getElementById('productsection').appendChild(newDivElem);

到：

// Code to switch options depending on ordertype
//------------------------- Does Not Work --------------------------
const optionList = optionListPH; // Modified
//------------------------------------------------------------------

// generates the content of the dropdown for products and is inserted to the above "productX" select tag
createOptionsElem(newProductSelectElem, optionList);

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

// Finally, appends the newly created div tag to the productSection tag.
document.getElementById('productsection').appendChild(newDivElem);

// I added the below script.
newOrderTypeSelectElem.addEventListener("change", function() {
  newProductSelectElem.innerHTML = "";
  createOptionsElem(newProductSelectElem, this.value === 'PH' ? optionListPH : optionListEC);
});

当此修改反映在您的脚本中时，单击按钮时，将创建 2 个下拉列表。 并且，当第一个下拉列表发生变化时，第二个下拉列表会刷新为新值。

笔记：

此修改适用于您的显示脚本。 当您更改脚本时，此脚本可能无法使用。 请注意这一点。

动态添加时如何创建依赖下拉列表？

问题描述

1 个解决方案

解决方案1
3 已采纳 2023-01-20 06:53:03

修改点：

从：

到：

笔记：

动态添加时如何创建依赖下拉列表？

问题描述

1 个解决方案

解决方案1 3 已采纳 2023-01-20 06:53:03

修改点：

从：

到：

笔记：

解决方案1
3 已采纳 2023-01-20 06:53:03