设置 <select> 标签的选项文本（显示给用户）

Question

我在 Google 工作表上创建了一个带有 <select> 下拉菜单的对话框。我将此 Materializecss 框架代码用于 select。下拉菜单必须显示我动态更新的数据。

我从后端调用该函数来获取我的数据将其显示在select选项中作为人们在下拉列表中看到的文本，用户的文本。

但数据在下拉列表中不可见（请参见下面白色选项的屏幕截图）。

在下拉菜单中，我得到了没有颜色的白色选项，只有当我点击它们时，我才能看到我的数据显示在一行中作为一个选择的变体。

换句话说，你没有看到你选择的东西，即使你认为一切都在正确的地方。

我需要 将数据添加到可见下拉列表 selection 以便您可以看到您选择的内容。

我试图将其添加为框架网站上提到的选项对象 ({})，但它对我不起作用。

感谢任何帮助。

代码：

    //on loading DOM select initialization, run my function
    document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('select');
        var options = addWeeks()
        var instances = M.FormSelect.init(elems, options);
        });

    function addWeeks() {
        //get data from backend and pass it to changeOptions function as arguments
        var weeks = google.script.run.withSuccessHandler(changeOptions).calculateWeeks()

        return weeks
     }

        function changeOptions(weeks) {


        var week1 = document.getElementById("1week").text = weeks[0]
        var week2 = document.getElementById("2week").text = weeks[1]
        var week3 = document.getElementById("3week").text = weeks[2]  

        var weeksTexts = {1: week1, 2: week2, 3: week3}

        return weeksTexts
    }

  <select>  
  <option value="" disabled selected>Choose week</option>
  <option value="1week" id ="1week" ></option>
  <option value="2week" id ="2week" ></option>
  <option value="3week" id ="3week" ></option>
  </select>

Answer 1

JS Fiddle - Add options dynamically

我会在 select 标签中添加一个 id，而不是给选项元素一个 ID 属性。如果您使用代码向 select 标签添加选项，则无需输入 pre-existing 选项标签 html

<select id="idWkChoice"><!-- select tag with only the first option -->
  <option value="" disabled selected>Choose week</option>
</select>

获取 select 元素，其中包含作为子项的所有选项。

var slctTagWeeks = document.getElementById('idWkChoice');//Get drop down element

向列表添加选项：

var slctTagWeeks = document.getElementById('idWkChoice');//Get drop down element
var option = document.createElement("option");
option.text = "Week 1";
option.value = "wk1";//Add a value code that is different than the show text
slctTagWeeks.add(option);

以上代码向列表中添加了一个以前不存在的选项。

然后你可以创建一个循环，并添加列表中的选项数：

var option;
var slctTagWeeks = document.getElementById('idWkChoice');//Get drop down element

var weeks = {
  wk1:'Week One',
  wk2:'Week Two',
  wk3:'Week Three'
}

for (var k in weeks) {
  thisID = k;
  thisText = weeks[k];
  option = document.createElement("option");
  option.text = thisText;
  option.value = thisID;//Add a value code that is different than the show text
  slctTagWeeks.add(option);

}

Answer 2

解决方案是将此 class 添加到 select 标签："browser-default".

它取消了 Materializecss 框架将 select 元素转换为 ul 元素。

所以对于上面的代码，我现在动态传递值。

设置 <select> 标签的选项文本（显示给用户）

Set options text (that is displayed to users) of <select> tag

html

javascript

html-select

google-apps-script