fill years in dropdown list by code

Ask the community
,
1

I need to fill a large entries of years from 1920 to 2021 in a dropdown list. I prefer doing it by coding.
Javascript works fine in this but not in Wix dropdown list. Is there any suggestions and codes recommended? Best.

I did the following code

export function DMyear_click(event) {

var min = 1920 , max = 2021 , select = $w( “#DMyear” );
let dropdownItems = $w( “#DMyear” ).options;
let optlabel, optvalue;

for ( var i = min; i<=max; i++) {
optlabel = i;
optvalue = i;

console.log( "optlabel is " , optlabel); 
console.log( "optvalue is " , optvalue); 

    dropdownItems.push({label: [optlabel], value: [optvalue]}); 
    $w( "#DMyear" ).options = dropdownItems; 
}

I got this error message.
Wix code SDK error: The label parameter of item at index 0 that is passed to the options method cannot be set to the value 1920. It must be type string
:sweat:

2

Dropdown elements accept only string values, so it needs to be converted with the toString() function. Also, putting a bracket around variables in the push function also results in an error and is not needed.

Populating the dropdown in the dropdown click event will result in a short delay that you probably will not like. You could put the code in the page onReady instead.

export function DMyear_click(event) {
 
 var min = 1920, max = 2021, select = $w("#DMyear");
 let dropdownItems = $w("#DMyear").options;
 let optlabel, optvalue;

 for (var i = min;  i<=max;  i++) {
        optlabel = i.toString();
        optvalue = i.toString();

    console.log("optlabel is ", optlabel);
    console.log("optvalue is ", optvalue);

        dropdownItems.push({label: optlabel, value: optvalue});
        $w("#DMyear").options = dropdownItems;
    }
}
3

I applied toString() to i for optlabel and optvalue. However, the error is

optlabel is [object Undefined]
optvalue is [object Undefined]

Removed bracket around variables (optlabel, optvalue) results in parsing error: unexpected token
dropdownItems.push(label: optlabel, value: optvalue);

The code is updated as follows:

export function DMyear_click(event) {

var min = 1920 , max = 2021 , select = $w( “#DMyear” );
let dropdownItems = $w( “#DMyear” ).options;
let optlabel = “” , optvalue = “” ;

for ( var i = min; i<=max; i++) {
optlabel = toString(i);
optvalue = toString(i);

console.log( "optlabel is " , optlabel); 
console.log( "optvalue is " , optvalue); 

    dropdownItems.push({label: optlabel, value: optvalue}); 
    $w( "#DMyear" ).options = dropdownItems; 
}

Best.

4

@hyactn

You have

optlabel = toString(i);
optvalue = toString(i);

It should be

 optlabel = i.toString();
 optvalue = i.toString();

The “parsing error: unexpected token” error is a result of having no closing brace for the whole function.

5

@tony-brunsman

Thank you for the suggestions. It works now. My click the DMyear element, it doesn’t show up the years in sequence, my 2nd click makes it listing all years. How come?

export function DMyear_click(event) {

var min = 2018 , max = 2021 , select = $w( “#DMyear” );
var opts = $w( “#DMyear” ).options=;
var optlabel, optvalue;

for ( var i = min; i<=max; i++) {
optlabel = i.toString();
optvalue = i.toString();

    opts.push({ "label" : optlabel,  "value" : optvalue}); 
    $w( "#DMyear" ).options = opts;

}

6

@hyactn As previously mentioned, it would be better to load the dropdown in the page onReady. You won’t have duplicates that way and they will be in sequence.

$w.onReady(function () {
      LoadDMyear();
});

export function LoadDMyear(event) {
 var min = 1920, max = 2021, select = $w("#DMyear");
 let dropdownItems = $w("#DMyear").options;
 let optlabel ="", optvalue ="";

 for (var i = min; i<=max; i++) {
        optlabel = i.toString();
        optvalue = i.toString();

        console.log("optlabel is ", optlabel);
        console.log("optvalue is ", optvalue);

        dropdownItems.push({label: optlabel, value: optvalue});
        $w("#DMyear").options = dropdownItems;
    }
}