Javascript 如何从谷歌表单中创建相关下拉列表？_Javascript_Html_Jquery_Google Apps Script_Google Sheets

Javascript 如何从谷歌表单中创建相关下拉列表？

javascript html jquery google-apps-script google-sheets

Javascript 如何从谷歌表单中创建相关下拉列表？,javascript,html,jquery,google-apps-script,google-sheets,Javascript,Html,Jquery,Google Apps Script,Google Sheets,我有一个自定义HTML表单谷歌表。表单包含两个元素 Категория Контрагент HTML <!DOCTYPE html> <html> <head> <title>My Dependent Dropdown</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bo

我有一个自定义HTML表单谷歌表。表单包含两个

元素


Категория
Контрагент

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>My Dependent Dropdown</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

  </head>
  <body>
    <form>
      <div class="form-group col-md-4">
        <label for="category">Category</label>
        <select id="category" class="form-control" required>
        </select>
      </div>
      <div class="form-group col-md-4">
        <label for="items">Items</label>
        <select id="items" class="form-control" required>
        </select>
      </div>      
    </form>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
  </body>

</html>

var db = [["Vegetable","Carrot"],["Vegetable","Onion"],["Fruit","Apple"],["Fruit","Banana"]];

$(document).ready(function(){
  var categoryLists = db.map(x => x[0]);
  categoryLists = [... new Set(categoryLists)]; //get unique category values
  categoryLists.forEach(x => $("#category").append(new Option(x, x))); //new Option("text", "value")
  $("#category").on("change",updateItemLists).change(); //add event listner and trigger it once to show items
});

function updateItemLists(){
  var category = $("option:selected", this).text(); //get category
  var itemLists = db.filter(x => x[0] == category).map(x =>x[1]);
  $("#items option").remove();
  itemLists.forEach( (x, i) => $("#items").append(new Option(x,i))); //x: array value ; i: array index
};