Add dropdown box in Google site

问题

I have some data in Google sheet. How can i extract the data based on user request as per a dropdown box and generate it in Google Site. The challenges iam faced with.

Prob_1- using a dropdown box in Google site

Prob_2- generate dynamic data ( or table ) in google site from the Google spreadsheet.

Analysis_1 - I have made a detailed study and understood that only using a third party plugin , i can make a select box. As a newbiew, needed some guidelines based on this. Is it not possible without any third party plugin.

Analysis_2- Or is there any other option to generate an action based on a selection in google site. I understood that scripting is not possible in google site. So how shall i make a button click action.

Need some guidelines on this.

回答1:

This is some javascript code to load options into a select box.

function updateSelect(vA)//array of values that go into the drop down or select box
{
  var select = document.getElementById("sel1");
  select.options.length = 0; 
  for(var i=0;i<vA.length;i++)
  {
    select.options[i] = new Option(vA[i],vA[i]);
  }
}

This is html for the select box.

 <select id="sel1" style="width:125px;height:35px;margin:10px 0 10px 0;">
      <option value="" selected></option>
   </select>

Seem pretty simple to me.

Here's a more complete solution.

Code:

function getSelectOptions()
{
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getSheetByName('Options');
  var rg=sh.getDataRange();
  var vA=rg.getValues();
  var options=[];
  for(var i=0;i<vA.length;i++)
  {
    options.push(vA[i][0]);
  }
  return vA;
}

function showSidebar()
{
  var userInterface=HtmlService.createHtmlOutputFromFile('f');
  SpreadsheetApp.getUi().showModelessDialog(userInterface, 'The Drop Down with No Options now has options.');
}

f.html

<!DOCTYPE html>
<html>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script>
    $(function() {
        $('#txt1').val('');
        google.script.run
          .withSuccessHandler(updateSelect)
          .getSelectOptions();
      });
    function updateSelect(vA)
    {
      var select = document.getElementById("sel1");
      select.options.length = 0; 
      for(var i=0;i<vA.length;i++)
      {
        select.options[i] = new Option(vA[i],vA[i]);
      }
    }
    console.log("My code");
  </script>
  </head>
  <body>
   <select id="sel1" style="width:125px;height:35px;margin:10px 0 10px 0;">
   </select>
 </body>
</html>

Here's what the sheet named Options

来源：https://stackoverflow.com/questions/45808769/add-dropdown-box-in-google-site

标签

button

google-apps-script

web-applications

html-select

google-sites