Dropdown placeholder won't show after dropdown is reset

[WORK AROUND] I did use a work around while it wasn’t working. I added a blank record in the collection I was referencing for my dropdown list. Choosing the blank record not only brought up all records (clearing the dropdown choice) but also triggered the placeholder to show :woman_shrugging:.


My dropdown continues to show the last option selected (year) after the following coding attempts to clear it . I want the dropdowns to return to showing the placeholder text.

$w('#yearDD').selectedIndex = undefined; // this does clear the selectedIndex but the last option chosen stays showing
$w('#yearDD').resetValidityIndication(); // thought this would reset the dropdown and trigger the placeholder to show
wixLocation.to("/edit-player-teams"); //refreshing the page with wixLocation.to doesn't help

Beginning state

User selects an option

User clicks reset button and the following code executes

import wixLocation from 'wix-location';

$w.onReady(() => {

//dropdowns options are from lists and filter datasets that feeds tables.  Placeholder is selected as "None" in settings
//and are only defined here in code
$w('#yearDD').placeholder = "Select Year";
$w('#programDD').placeholder = "Select Program";
$w('#playerDD').placeholder = "Select Player";

$w('#resetFiltersButton').onClick(() => {

$w('#yearDD').selectedIndex = undefined;
$w('#programDD').selectedIndex = undefined;
$w('#playerDD').selectedIndex = undefined;

$w('#yearDD').resetValidityIndication();
$w('#programDD').resetValidityIndication();
$w('#playerDD').resetValidityIndication();
wixLocation.to("/edit-player-teams"); 

$w('#players').refresh();
$w('#team').refresh();
$w('Table').refresh();

})
})

console.log shows me that the dropdowns are undefined and that the placeholder is still “Select Year” . However, dropdowns continue to look like the second image above with the selection of “2023” appearing to be the placeholder. I thought a wixLocation.to would refresh the page and the dropdown but it doesn’t do anything.

Can anyone help me figure this out? For now I have added a blank item (record) in the collections that the dropdowns source their lists from and am using that to trigger the placeholder.

#dropdown #resetValidityIndication #selectedIndex #placeholder

The code does exactly what you are saying…

This is correct…

// this does clear the selectedIndex but the last option 
$w('#yearDD').selectedIndex=undefined; 

At this point my urgent suggestion for your future coding…
—> this looks like a good variable definition → #yearDD <— but it ins’t.

Instead invert it → “ddYear” ← use the ELEMENT-ID always —> FIRST <—

Back to your question:
A DropDown has 5 different kind of values…
a) SelectedIndex —> $w(‘#yearDD’).selectedIndex=undefined;
b) PlaceHolder -------> $w(‘#yearDD’).placeholder =“Select Year”;
c) Value ----------------->
d) Option --------------->
e) Label ------------------>

Where was your mistake?
What is the difference between a PLACEHOLDER AND AN OPTION ?
And what the hell is the Label ?

$w("#ddYear").options = [
  {"label": "Label-1", "value": "first"},
  {"label": "Label-2", "value": "second"},
  {"label": "Label-3", "value": "third"}
];

Now your turn !!! :wink:

https://www.wix.com/velo/reference/$w/dropdown/label?_gl=1*rtnmvi*_ga*NTkxMDg0NjY0LjE2NzcyNTQ1NDI.

And —> WHAT ??? <---- YOU ARE TRYING TO USE A NOT READY DATASET ???

import wixLocation from 'wix-location';

$w.onReady(() => {
    $w('#yearDD').placeholder = "Select Year";
    $w('#programDD').placeholder = "Select Program";
    $w('#playerDD').placeholder = "Select Player";

    $w('#resetFiltersButton').onClick(() => {
        $w('#yearDD').selectedIndex = undefined;
        $w('#programDD').selectedIndex = undefined;
        $w('#playerDD').selectedIndex = undefined;
        //------------------------------------------
        $w('#yearDD').resetValidityIndication();
        $w('#programDD').resetValidityIndication();
        $w('#playerDD').resetValidityIndication();
        wixLocation.to("/edit-player-teams"); 
        //------------------------------------------
        $w('#players').refresh();
        $w('#team').refresh();
        $w('Table').refresh();
    });
});

What are you missing here ???

Maybe something like…

$w(datasetID).onReady(()=> {
    console.log("Dataset is ready.");
});

Where to put it in ?

Maybe also interesting for you…
https://community.wix.com/velo/forum/coding-with-velo/how-to-show-tags-from-a-dataset-in-your-repeater

did you get a resolution to this ? I have the same problem. In fact, assigning the options array in the first place causes the placeholder text to be set to the first Option Value and you can’t reset the placeholder text in code. This is recent so I think there’s a bug ??

Are you able to show a short video of the issue ?

thanks… if you visit this page:

https://ptiernanhome.wixsite.com/cardealer2/general-8

All of the dropdowns should be showing Placeholder Text (and used to) such as Category, Make, Model, Age Range, Price Range, etc.
Instead the default placeholder text gets changed to the All value as soon as I assign the values to each dropdown from a dataset.

To test trying to FORCE the dropdown11 (first one top left) I created a Test button. When you click it the following code is run but it still doesn’t allow the placeholder text to be changed. The code for the Test Button top left hand side is as follows:

export function testButton_click ( event ) {
console . log ( “Placeholder before for dropdown11:” , $w ( “#dropdown11” ). placeholder );

$w ( “#dropdown11” ). options =;
$w ( “#dropdown11” ). options . push ( { “label” : “All” , “value” : “” } );
$w ( “#dropdown11” ). options . push ( { “label” : “Cars” , “value” : “Cars” } );
$w ( “#dropdown11” ). options . push ( { “label” : “Vans” , “value” : “Vans” } );
$w ( “#dropdown11” ). selectedIndex = undefined ;
$w ( “#dropdown11” ). placeholder = “Category” ;

console . log ( “Placeholder after for dropdown11:” , $w ( “#dropdown11” ). placeholder );
}

Which does run as the console log shows “Category” for the dropdown11 placeholder text both before I click the test button & after yet the dropdown shows “All” as the placeholder always !!

https://velo-ninja.editorx.io/code-ninja/blank-3

$w.onReady(()=> {
    let options = $w("#dropdown11").options;
    options.push({"label": "All", "value": ""});
    options.push({"label": "Cars", "value": "Cars"});
    options.push({"label": "Vans", "value": "Vans"});
    console.log("My-Options: ", options);
    $w('#testButton').onClick(()=>{
        populate_Dropdown(options);
    });
});


function populate_Dropdown(options) {console.log("Pupulation DropDown running...");
    console.log("Placeholder before for dropdown11:",$w("#dropdown11").placeholder);
    $w("#dropdown11").options = options;
    $w("#dropdown11").selectedIndex=undefined;
    $w("#dropdown11").placeholder="Category";
    console.log("Placeholder after for dropdown11:",$w("#dropdown11").placeholder);
}

Take a look onto example …

What was the problem ? :wink: Everything seems to run without any problem…

I think I have sorted it… The dropdown element in Settings has to have Dropdown type as Browser & not Custom… Browser seems to fix it. I have no idea what this setting is used for !!!

Thank you @russian-dima ! I am learning as I go and am grateful for all your advice.

UPDATE: My Mistake - it did not correct itself. Blank record is currently the only solution that is working for me. I am going to try the Browser vs Custom workaround again (tried it after reading your post but didn’t get the desired result) and then will post a new independent request for help if that doesn’t work. I think we are experiencing the same problem but I believe my relationships between collections/datasets/filtering/dropdowns is slightly different than yours. Maybe if I provide the details it will trigger something not yet considered and move the system towards a solution (or educate me if I am the problem).


The problem seems to have corrected itself since having made this post. Without changing my code now the placeholder appears as expected after clearing the dropdown. However, in the meantime what I did was add a blank record in the table I was using for my dropdown list. When the blank record was selected then the placeholder would show. Not sure why it worked but it was a work around that solved the problem at the time.

ok… I think I know what causes this… I had 7 dropdowns and one day they all defaulted to the first dropdown value “All” instead of their own placeholder text - which had always worked as expected. The placeholder text was different for each dropdown but that stopped working. To my knowledge I didn’t make any changes that should cause this behaviour. Strange. Then like you in Velo code I tried to manipulate the dropdown placeholder text but no matter what I did - it would not display. Setting placeholder text and selectedIndex - wouldn’t change the placeholder. It would always show the first value in each dropdown. I ended up manipulating the dropdown values to include the placeholder text as the first Value !!! which kind of worked but caused other issues. Then I stumbled across the cause. In the Editor if you look at Settings for a dropdown… the “Type” attribute had changed from “Browser” to “Custom”. When the dropdown type is set to Custom - the placeholder text doesn’t display or cannot be manipulated in Velo code. Somehow all of my dropdowns had switched to “Custom”. I have no idea how/why and I didn’t do it. Some default Editor settings must have changed by Wix and affected exiting sites’ dropdowns (!! :open_mouth: ). If you change the dropdown Type back to Browser the placeholder text should work as normal without forcing blank entries etc in your values list. You can test it really simply by changing that Settings attribute in the Editor and taking a look at the behaviour in your dropdowns. My example here under “View Stock” which now works. I undid the workarounds and change the Type attribute for each dropdown. Hey presto!

https://ptiernanhome.wixsite.com/cardealer2