1

I am trying to do the following, but I am new to GAS, so I am stuck. I have two Dropdowns (GAS HTML) that will be fill with data from a Google Spreadsheet.

What I want is that when I select the value number 1 from the first Dropdown, the second Dropdown fills with info from column B from the spreadsheet. If I choose value number 2 in the Dropdown number one, then I want the dropdown number two, to fill from column C (of the same spreadsheet). If I choose in Dropdown number one, value number 3, then Dropdown number two, will show info from column D, and so on.

Right now, I can only display the values of the first Dropdown, but don´t know how to use some kind of code like "If, THEN, ELSE", to retrieve data from a Google Spreadsheet to the second Dropdown, depending on the value selected in Dropdown number one.

CODE.gs

function doGet() {
  var template = HtmlService.createTemplateFromFile("HTML")
  return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .getContent();
}

function listData(){
  var SpreadSheet2 = SpreadsheetApp.openByUrl("SPREADSHEETURL").getSheetByName("Sheet 1");
  var listDropDownBoxidCOUNTRY =  new Array(100);
  listDropDownBoxidCOUNTRY = SpreadSheet2.getRange(2,1,SpreadSheet2.getRange("A2").getDataRegion().getLastRow(),1).getValues();
  return listDropDownBoxidCOUNTRY ;
}

HTML

<?!= include("HTML_js"); ?>   

<div>
<label><b>SELECT A COUNTRY:</b></label>
<select id="idCOUNTRY">
      <option disabled selected>-- Select a Country --</option>
</select>
<div>
 <label><b>SELECT A STATE:</b></label>
<select id="idSTATE">
<option disabled selected>-- Select a state --</option>
</select>
</div>

Javascript

<script>
window.onload = function(){
      google.script.run.withSuccessHandler(FillDropDownBoxidCOUNTRY).listData();
}

function FillDropDownBoxidCOUNTRY(list){
   var listData = list;

  for (var i = 0; i< listData.length;i++) {
    var element2 = document.createElement("option");
    element2.textContent = listData[i];
    element2.value = listData[i];
    document.getElementById("idCOUNTRY").appendChild(element2);
  }
}
</script>
MaartenDev
  • 5,631
  • 5
  • 21
  • 33
ONTIVER
  • 75
  • 5
  • Tie the action of getting DropDown 2 data to the onChange event of DropDown 1 – Cooper Sep 25 '19 at 18:30
  • @ONTIVER - try this solution here - https://stackoverflow.com/questions/21561353/jquery-populate-drop-down-options-based-on-another-drop-down-option-using-javasc – Sourabh Choraria Sep 26 '19 at 05:53
  • Possible duplicate of [Dynamically Populating Drop down list from selection of another drop down value](https://stackoverflow.com/questions/30232146/dynamically-populating-drop-down-list-from-selection-of-another-drop-down-value) – AMolina Sep 26 '19 at 06:40

0 Answers0