I created a dialog with <select> dropdown on Google sheets.
I used this Materializecss framework code for select.
The dropdown has to show my dynamically updated data.
I call the function from backend to get my data to show it in select options as text that people see in dropdown, user's text.
But the data is not showing visible to the eye in a dropdown (see the screenshot of white options below).
In a dropdown I get the options in white with no color and when I click on them only then I can see my data shown in a row as a chosen variant.
In other words, you don't see what you choose even thought everithing in on the right place.
I need to add data to the visible dropdown selection so you can see what you choose.
I was trying to add it as an options object ({}) as mentions on the framework site, but it didn't work with me.
Appreciate any help.
The code:
//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>
