Dropdown.options not working (UPDATE: mixed success, sometimes code works, other times the dropdown fails to update)

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.

If I remember correctly, this has come up before. Could you do me a favor and add
?forceBolt=true
to the published URL and see if it does work when forcing Bolt instead of Thunderbolt

This project isn’t ready for publish. Can’t test that, sorry.

Hi James,
Can you share the Editor URL for your site? Only the Wix team will be able to open and view it. We have an open bug on a dropdown.options issue and it might apply for your site as well. Thanks.

This link?

It’s the dropdown #location on the Add Camps dashboard page

@marlowe-shaeffer Sorry I replied below by accident

Thanks. I’ll pass this along to the team, but you might want to post your page code here in case someone from the community can help troubleshoot in the meantime.

@marlowe-shaeffer The code example I gave is the code structure. It’s just .options is not working as specified in the documentation. I’m just giving it a new array of objects with label and value pairs. Exactly as the documentation outlines.

@jamesmrobertsonwork Can you please share your email address somewhere within your site and let me know where I can find it?

@marlowe-shaeffer On the Add Camp Dashboard page above the form with the problem

@jamesmrobertsonwork Got it. Thanks!

Hi James,
You should have received an email from the team with a support ticket number.

Next time, please post your page code (not just the console logs) so other members can help troubleshoot the issue—in case there’s a problem in the code you wrote. Thanks.

I’m having the same problem. But James’ solution didn’t work for me. Nothing shows. My code (choosing by value or selectedIndex makes no difference):

const $dd = $w( ‘#21’ );
const opts = [ {label: ‘Brazil’ , value: ‘1’ }, {label: ‘Arg’ , value: ‘2’ } ];
$dd.options = opts;
$dd.selectedIndex = 0 ;

Try directly assigning it. I’ve had more success with direct access request. I think it has to do with how Wix internally compiles the $w() selector. When you reference something selected, wix doesn’t always find what you selected the way you would think:

const opts = [ {label: ‘Brazil’ , value: ‘1’ }, {label: ‘Arg’ , value: ‘2’ } ];
$w( ‘#21’ ).options = opts;
$w( ‘#21’ ).selectedIndex = 0 ;

@jamesmrobertsonwork Doesn’t work. Thanks anyway, James

It seems this hasn’t been fixed, I tried this solution and it worked:

const opts = [ {label: ‘Brazil’ , value: ‘1’ }, {label: ‘Arg’ , value: ‘2’ } ];
$w( ‘#21’ ).options = opts;
$w( ‘#21’ ).options = opts;
$w( ‘#21’ ).options = opts;
$w( ‘#21’ ).selectedIndex = 0 ;
It’s kinda dodgy but it seems to work.

An easy oversight is to forget to ensure the values are all strings. Preview mode doesn’t seem to log an error if you provide values as numbers so you’ll be left wondering why things aren’t working :slight_smile: