ISSUE:
My project has a dropdown that I’m filling programmatically. The problem is despite it getting the new options, the element on the page never updates and stays empty.
In my code I run this:
console.log(newOptions); //correct
dropdown.options = newOptions;
console.log(dropdown.options) //same as first log, it knows what it's supposed to have
But the element does not update. I can disable dropdown and do everything else and it’s connected correctly and effects the right element, but the options property is not updating visually.
It’s been extra strange since earlier it was working fine, but now on refreshing it just fails to update. I haven’t changed the code and nobody else has and it’s running inconsistently
UPDATE:
The following code structure sometimes works; I am still having problems with the element updating correctly
//Within query callback
const resultOptions = results.items;
//sort as needed
resultOptions.reverse();
let opts = $w("#dropdown").options;
for(let loc of resultOptions){
opts.push(loc);
}
$w("#dropdown").options = opts;
$w('#dropdown').selectedIndex = 0;
This is following almost exactly the third options example, but NOTE do not treat opts like a typical array. The return object has problems with normal array functions. For example the following fails:
//instead of:
for(let loc of resultOptions){
opts.push(loc); //works
}
opts.push(...resultOptions); //fails
Seems like re-requesting the direct element through $w is more likely to make things work as described, but if you try and reference options through something like my original code:
const dropdown = $w('#dropdown');
dropdown.options = resultOptions;
It has problems and fails to update the actual element.
So follow the structure of the third code example in the documentation exactly:
let opts = $w("#myDropdown").options;
opts.push({"label": "New Label", "value": "New Value"});
$w("#myDropdown").options = opts;
And re-reference the dropdown every time you wish to change the options.
