使用给定的动态数据更新 select 选项

Question

需要将动态（非硬编码）数据发送到 select 元素。

此代码在我的一个 sheet 中运行良好，但 在另一个 sheet.

中不起作用

"select" 元素未使用我发送的选项进行更新。。我也没有收到错误消息。

我花了很多时间抽动它并试图找出原因，但仍然看不出问题所在。

p.s。我使用虚拟对象发送数据以进行测试。

html（使用MaterializeCss框架）

<select class="icons browser-default" id="selName" onChange ="getNameText();">  
  <option value="" disabled selected>Choose week</option>

 <div id = "err"></div>

//select element initialization in framework
document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('select');
  var options = handlers()
  var instances = M.FormSelect.init(elems);
});

function handlers() {

  var success = google.script.run.withSuccessHandler(addOptions).getNamesForDropdown()
  var failure = google.script.run.withFailureHandler(showError).getNamesForDropdown()

  return;
}

function addOptions(names) {

  var selectTag = document.getElementById("selName") //select tag

     for (var k in names) {        
         var thisID = k;
         var thisText = names[k];
         var option = document.createElement("option"); //creating option        
         option.text = thisText
         option.value = thisID;
         selectTag.add(option);
     }
}

function showError() {

  var err = document.getElementById("err").innerHTML = "There was an error."
}


//get the text of selected option
function getNameText() {

  var sel = document.getElementById("selName")

  var nameText = sel.options[sel.selectedIndex].text;

  return nameText;
}

我发送的虚拟对象：

function getNamesForDropdown() {

  var namesObj = {
    
    one: "blah",
    two: "blahblah"    
  }

  return namesObj;
}

这是我得到的结果（在屏幕上你只有硬编码选项）：

Answer 1

我处理了。我在 select 中添加了 class "browser-default" 并且选项得到了更新。此 class 来自 MaterializeCss 框架。

使用给定的动态数据更新 select 选项

Update the select options with given dynamic data

html

javascript

html-select

google-sheets

google-apps-script