Javascript 和 HTML - 将下拉索引值作为对象属性传递返回未定义

我是这门语言的新手，并且遇到了障碍。我已经搜索了几个小时来了解这个特定问题，但似乎无法弄清楚为什么我的情况如此难以解决。我确信我只需要一双知道自己在看什么的眼睛。

我正在尝试将下拉选择的索引传递到我的 Code.gs 函数中，以便我可以在其他地方使用它来选择电子表格中数据的特定行。我设置了对象 driverPicked 并为其提供了选定的属性，然后寻找选定的索引属性。因为我对此很陌生，所以我很难理解像这样的嵌套属性的后果，并且可以使用线索来解决“TypeError:无法读取未定义的属性'selected'”(第39行，文件“代码”)”错误我已经收到几个小时了。

有很多类似的答案，但我无法准确地弄清楚它们如何适用于我 - 所以请原谅我!

var url = "REDACTED";

function doGet(e){

//var x = document.getElementById("driver").selectedIndex;  

var driverIndex = userClicked();
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("Results_2019");
var listDrivers = ws.getRange(4,1,ws.getRange("A3").getDataRegion().getLastRow(),1).getValues();
var infoHeading = ws.getRange(3, 1, 1, 8).getValues();
var driverInfo = ws.getRange(driverIndex, 1, 1 ,8).getValues();


var tmp = HtmlService.createTemplateFromFile("page"); 
tmp.title = "GLTC Driver List";
//tmp.listDrivers = listDrivers.map(function(r){r[0];});
tmp.listDrivers = [].concat.apply([], listDrivers);
tmp.infoHeading = [].concat.apply([], infoHeading);
tmp.driverInfo = [].concat.apply([], driverInfo);
tmp.driverIndex = driverIndex;


return tmp.evaluate();

}


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


function userClicked(driverPicked) {
  console.log(driverPicked); 
  var driverName = driverPicked.value;
  return driverName;
}


<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <!--Let browser know website is optimized for mobile-->
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <!--Import Google Icon Font-->
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <?!= include("page-css"); ?>
  </head>
  <body>

    <h1><?= title; ?></h1>

    <div class="input-field">
  <select id="driver">
    <option disabled selected>Choose Driver</option>
    <? for(var i=0;i<listDrivers.length;i++){ ?>
      <option class="selected">
        <?= listDrivers[i]; ?>
      </option>
      <? } ?>
  </select>
</div>

  <h5><?= infoHeading; ?></h5>

  <h5><?= driverInfo; ?></h5>

  <h5><?= driverIndex; ?></h5>

<script>  

document.getElementById("driver").addEventListener("change", doStuff); // add onchange listener to the select element instead of options

function doStuff(event) {
  var driverPicked = {};

  driverPicked.driver = event.target.value;
  driverPicked.selected = event.target.options.selectedIndex;
  userClicked(driverPicked);
}


  </script>

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <?!= include("page-js"); ?>

  </body>
</html>

最佳答案

代码的一些问题:

DOM 元素的 id 必须是唯一的，因此在呈现选项时，您需要向 id 添加索引或使用类名。
对 select 元素使用 change 事件，而不是 click。
您可以将事件对象作为 doStuff 函数中的参数来访问，而不用手动查询 DOM 元素。我不确定为什么你需要获取索引，但为了获取驱动程序的名字，你可以这样做:

<div class="input-field">
  <select id="driver">
    <option disabled selected>Choose Driver</option>
    <? for(var i=0;i<listDrivers.length;i++){ ?>
      <option class="selected"> // use class instead of id here
        <?= listDrivers[i]; ?>
      </option>
      <? } ?>
  </select>
</div>

document.getElementById("driver").addEventListener("change", doStuff); // add onchange listener to the select element instead of options

function doStuff(event) {
  var driverPicked = {};

  driverPicked.driver = event.target.value;
  driverPicked.selected = event.target.options.selectedIndex;

  google.script.run.userClicked(driverPicked);
}

function userClicked(driverPicked) {

  var driverName = driverPicked.value;
  return driverName;
}

这是一个可运行的示例，其中包含一些模拟 select 选项:

document.getElementById("driver").addEventListener("change", doStuff); // add onchange listener to the select element instead of options

function doStuff(event) {
  var driverPicked = {};

  driverPicked.driver = event.target.value;
  driverPicked.selected = event.target.options.selectedIndex;
  userClicked(driverPicked);
}

function userClicked(driverPicked) {
  console.log(driverPicked); 
  var driverName = driverPicked.value;
  return driverName;
}

<div class="input-field">
  <select id="driver">
    <option disabled selected>Choose Driver</option>
      <option class="selected"> Driver 1</option>
      <option class="selected"> Driver 2</option>
  </select>
</div>

关于Javascript 和 HTML - 将下拉索引值作为对象属性传递返回未定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60268783/

Javascript 和 HTML - 将下拉索引值作为对象属性传递返回未定义

上一篇：javascript - 虚拟化 : Dependent v-select based on selection

下一篇：javascript - Web Worker 和 Worker Threads 有什么区别？