Задать текст параметров (который отображается для пользователей) тега <select>

Question

Я создал диалог с <select> раскрывающимся списком на страницах Google.Я использовал этот Materializecss код структуры для выбора.В раскрывающемся списке должны отображаться мои динамически обновляемые данные.

Я вызываю функцию из бэкэнда, чтобы получить мои данные , чтобы они отображались в опциях выбора в виде текста , который люди видят в раскрывающемся списке, текст пользователя.

Но данные не отображаются видимыми для глаза в раскрывающемся списке (см. Скриншот с белыми вариантами ниже).

В раскрывающемся списке я получаю параметры белого цвета без цвета, и когда я щелкаю их только тогда, я вижу свои данные, показанные в строке как выбранный вариант.

Другими словами,вы не видите того, что выбираете, даже когда-либо думали в нужном месте.

Мне нужно , чтобы добавить данные в видимый выпадающий список, чтобы вы могли видеть, что вы выбираете.

Я пытался добавить его как объект параметров ({}), как упоминалось на сайте фреймворка, но он не работал со мной.

Благодарим за любую помощь.

код:

    //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

Решением было добавить к тегу select этот класс: «browser-default».

Он отменил преобразование элемента select в элемент ul, что делает Frameworkizeize.

с кодом выше я передаю значения динамически сейчас.

Answer 2

JS Fiddle - Добавить параметры динамически

Я бы добавил идентификатор к тегу выбора, а не присваивал элементам параметров атрибут ID. Если вы добавляете опции в тег select с кодом, вам не нужно вводить ранее существующий тег option 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);

}