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

Question

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

此代码在我的一个工作表中很好用，但在另一工作表中不工作。

“选择”元素未更新为我发送的选项。。 我也没有收到错误消息。

我花了很多时间来抽动它，试图找出原因，但仍然看不到有什么问题。

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

我处理了。我在选择中添加了一个“浏览器默认值”类，并且选项得到了更新。此类来自MaterializeCss框架。