How to create dependent dropdowns when adding it dynamically?-CodePudding

How do I create a dynamic dependent dropdown list in Google AppsScript? What I want to achieve is, when I choose PH in order type, the product selection dropdown should have ['PH-Test Product 1', 'PH-Test Product 2', 'PH-Test Product 3'] options. And when I choose EC it should have ['EC-Test Product 1', 'EC-Test Product 2', 'EC-Test Product 3'].

Here's my code-

form.html

<head>
 <base target="_top">
 <?!= include('css_script'); ?>
</head>
<body>
 <div >    
  <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();
}

CodePudding user response：

Modification points:

In your script, when a button is clicked, 2 dropdown lists are created. By this, at the following script,
```
  if(document.getElementById(`ordertype${counter}`).value === 'PH'){
    const optionList = optionListPH;
  }else{
    const optionList = optionListEC;
  }
```
- in the case of your script, optionListPH is always used to the 1st dropdown list.
And, when you want to change the 2nd dropdown list by changing the 1st dropdown list, it is required to add more script for checking it.

When these points are reflected in your script, how about the following modification?

From:

// 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);

To:

// 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);
});

When this modification is reflected in your script, when a button is clicked, 2 dropdown lists are created. And, when 1st dropdown list is changed, the 2nd dropdown list is refreshed with new values.

Note:

This modification is for your showing script. When you change your script, this script might not be able to be used. Please be careful about this.