时间戳

首页 > 解决方案 > HTML 表单中的依赖下拉列表

javascript - HTML 表单中的依赖下拉列表

问题描述

我的 HTML 表单中需要一个依赖下拉列表。

我参考 了http://jsfiddle.net/k148pk76/1/ 来制作下面的代码。

“依赖”下拉列表没有被填充。

代码.gs

function doGet(request) {
  return HtmlService.createTemplateFromFile('Index').evaluate();
}

/* @Include JavaScript and CSS Files */
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
  .getContent();
}

/* @Process Form */
function processForm(formObject) {
  var url = "https://docs.google.com/spreadsheets/d/1fCCi2-dvA9K_pxlOkO3BSLkUDPiphVtu2gkNp4_zQR4/edit#gid=284578578";
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Survey");
  ws.appendRow(
    [
      new Date(),
      formObject.surveyor,
      formObject.company,
      formObject.product,
      formObject.rating,
      formObject.rem,
    ]
  );
}

索引.html

<!DOCTYPE html>
<html>

<head>
    <base target="_top">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <?!= include('JavaScript'); ?>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-6">
                <form id="myForm" onsubmit="handleFormSubmit(this);">
                    <p class="h4 mb-4 text-left">Product satisfaction Survey</p>


                    <div class="form-group">
                        <label for="Surveyor">Surveyor (Select one)</label>
                        <select class="form-control" id="surveyor" name="surveyor" required>
                            <option selected disabled hidden style='display: none' value=''></option>
                            <option value="S1">S1</option>
                            <option value="S2">S2</option>
                            <option value="S3">S3</option>
                            <option value="S4">S4</option>
                        </select>
                    </div>


                    <div class="form-group">
                      <label for="company">company (Select one)</label>
                      <select name="company" id="company" onChange="changeCompany(this.value);">    <option value="" disabled selected>Select</option>
                        <option value="C1">C1</option>
                        <option value="C2">C2</option>
                        <option value="C3">C3</option>
                      </select>
                    </div>

                    <div class="form-group">
                      <label for="product">product (Select one)</label>
                      
                      <select name="product" id="product">
                      <option value="" disabled selected>Select</option>
                      </select>
                    </div>


                    <div class="form-group">
                        <label for="Rating">Rating (Select one)</label>
                        <select class="form-control" id="rating" name="rating" required>
                            <option selected disabled hidden style='display: none' value=''></option>
                            <option value="1">1. Not Interested</option>
                            <option value="2">2. Minor Interest - Needs Some Changes</option>
                            <option value="3">3. Neutral</option>
                            <option value="4">4. Interested - Not a Major Priority. Work in When Appropriate</option>
                            <option value="5">5. Extremely Interested - Put into Testing Process</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="rem">Remark</label>
                        <input type="text" class="form-control" id="rem" name="rem">
                    </div>


                    <div class="form-group">
                        <input type="hidden" class="form-control" id="lat" name="lat">
                        <input type="hidden" class="form-control" id="long" name="long">
                    </div>

                    <button type="submit" class="btn btn-primary btn-block">Submit</button>
                </form>

                <div id="output"></div>
            </div>
        </div>
    </div>
</body>

</html>



<script>

  var productsByCompany = {
    C1: ["C1P1", "C1P2", "C1P3"],
    C2: ["C2P1", "C2P2"],
    C3: ["C3P1", "C3P2", "C3P3","C4P4"]
}

    function changeCompany(value) {
        if (value.length == 0) document.getElementById("company").innerHTML = "<option></option>";
        else {
            var companyOptions = "";
            for (comanyId in productsByCompany[value]) {
                companyOptions += "<option>" + productsByCompany[value][categoryId] + "</option>";
            }
            document.getElementById("company").innerHTML = companyOptions;
        }
    }

</script>

JavaScript.html

<script>
    // Prevent forms from submitting.
    function preventFormSubmit() {
        var forms = document.querySelectorAll('form');
        for (var i = 0; i < forms.length; i++) {
            forms[i].addEventListener('submit', function(event) {
                event.preventDefault();
            });
        }
    }
    window.addEventListener('load', preventFormSubmit);
    window.addEventListener('load', showPosition);

    function handleFormSubmit(formObject) {
        google.script.run.processForm(formObject);
        document.getElementById("myForm").reset();
        //var formvals = Objapp.objectToArray(formObject); 
        alert('Your response was saved successfully');
    }
</script>

所有值（“依赖”下拉列表除外）都填充在工作表中

https://docs.google.com/spreadsheets/d/1fCCi2-dvA9K_pxlOkO3BSLkUDPiphVtu2gkNp4_zQR4/edit#gid=1993914568

通过网络应用程序

https://script.google.com/macros/s/AKfycbxlrXrGzNvLvJQy4kbH1XxjM0tlCas7Bj2ycJmL0G5AcZhlepx2njoa4irA9J76mWD5/exec

这是我尝试过的分支谷歌表单。但是，它需要 300 个分支并创建 600 列，这是我不想要的。

在此处输入图像描述

标签： javascripthtmlgoogle-apps-scriptgoogle-sheetswebapp2

解决方案

你的 jsfiddle 有点不对劲。更改下拉项时，无需在 for 循环中引用选定的数组项。

所以你的初始 for 循环：

for (categoryId in mealsByCategory[value]) {
  catOptions += "<option>" + mealsByCategory[value][categoryId] + "</option>";
}

对此的更改：

for (categoryId of mealsByCategory[value]) {
  catOptions += "<option>" + categoryId + "</option>";
}

请记住，我们已经知道我们正在查看哪个餐食类别，因为它被声明为我们正在循环的集合。

var mealsByCategory = {
  A: ["Soup", "Juice", "Tea", "Others"],
  B: ["Soup", "Juice", "Water", "Others"],
  C: ["Soup", "Juice", "Coffee", "Tea", "Others"]
}

function changecat(value) {
  // Clear the target dropdown so that we don't stack results.
  const categoryList = document.querySelector("#category");
  categoryList.innerHTML = "";
  
  if (value.length == 0)
  {
    categoryList.innerHTML = "<option></option>";
  }
  else {
    let catOptions = "";
    for (categoryId of mealsByCategory[value]) {
      catOptions += "<option>" + categoryId + "</option>";
    }
    categoryList.innerHTML = catOptions;
  }
}
<select name="meal" id="meal" onChange="changecat(this.value);">
    <option value="" disabled selected>Select</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>
<select name="category" id="category">
    <option value="" disabled selected>Select</option>
</select>

http://jsfiddle.net/j3p7f642/

推荐阅读