title: Update 2nd Dropdown Data With Spreadsheet info, depending on 1st Dropdown value
body: <p>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. </p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <blockquote>
    <p>CODE.gs</p>
  </blockquote>
  
  <pre><code>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 ;
  }
  
  </code></pre>
  
  <blockquote>
    <p>HTML</p>
  </blockquote>
  
  <pre class="lang-html prettyprint-override"><code>&lt;?!= include("HTML_js"); ?&gt;   
  
  &lt;div&gt;
  &lt;label&gt;&lt;b&gt;SELECT A COUNTRY:&lt;/b&gt;&lt;/label&gt;
  &lt;select id="idCOUNTRY"&gt;
        &lt;option disabled selected&gt;-- Select a Country --&lt;/option&gt;
  &lt;/select&gt;
  &lt;div&gt;
   &lt;label&gt;&lt;b&gt;SELECT A STATE:&lt;/b&gt;&lt;/label&gt;
  &lt;select id="idSTATE"&gt;
  &lt;option disabled selected&gt;-- Select a state --&lt;/option&gt;
  &lt;/select&gt;
  &lt;/div&gt;
  
  </code></pre>
  
  <blockquote>
    <p>Javascript</p>
  </blockquote>
  
  <pre class="lang-js prettyprint-override"><code>&lt;script&gt;
  window.onload = function(){
        google.script.run.withSuccessHandler(FillDropDownBoxidCOUNTRY).listData();
  }
  
  function FillDropDownBoxidCOUNTRY(list){
     var listData = list;
  
    for (var i = 0; i&lt; listData.length;i++) {
      var element2 = document.createElement("option");
      element2.textContent = listData[i];
      element2.value = listData[i];
      document.getElementById("idCOUNTRY").appendChild(element2);
    }
  }
  &lt;/script&gt;
  </code></pre>