Remove blank option in dropdown list

Discussion Ask a question
,
1

I have a page of dropdown boxes that get their options from a database collection. Each colum in the collection holds the values of a different dropdown.

The problem is when one colum has more items in it than another, the dropdown box with less items will show a blank space.

I have tried:
let dropdownOptions = $w(“#myDropdown”).options;
dropdownOptions.pop();
$w(“#myDropdown”).options = dropdownOptions;

to remove the last empty option in the dropdown list but it doesn’t seem to work.
On page refresh it also selects that blank option in the box even though I have Placeholder text set…

Any ideas?

2

Hi,

you can always use the slice method. take a look here: Array.prototype.slice() - JavaScript | MDN

then, just assign $w('myDropdown').options with the new value:
for example, this code snippet will leave the first option only:
$w('myDropdown').options = $w('myDropdown').options.slice(1, 2)

regrading the placeholder issue, can you please provide more information?

Thanks you and Good luck,
Idan.

3

I have gotten this:

let dropdownOptions = $w(“#dropdown1”).options;
if (dropdownOptions[2].label === “”)
{
dropdownOptions.pop(2);
$w(“#dropdown1”).options = dropdownOptions;
}

to remove the 3rd option which is blank, by putting it inside the onClick or onMouseIn event handlers.
This does however cause an error on subsequent mouse overs because that option no longer exists.

For some reason the above code doesn’t want to work in the page’s onReady function.

As for the placeholder issue: when I navigate to this page from somewhere else on my site, the dropdown will have the blank option selected. You can see this on my live site, under the tournament catagories section. The “whos the best” dropdown will do the same but on mouseover will display the correct placeholder (probably due to it using the onMouseIn event to change the options).

the link for my live site is https://cpengelbrecht93.wixsite.com/kendotracker/create

Thanks!

4

Hey,

Regarding the errors on subsequent mouse overs, I assume using onClick should solve this issue.
Regarding the code, since options is an object, you’re basically pointing to it instead of copying it.
try something like that:
$w(‘myDropdown’).options = $w(‘myDropdown’).options.filter((opt)= > opts.label === “”).

Regarding the placeholder, either try looking for a bug in the component’s code, or start from scratch.
If you still can’t resolve this issue, please respond here again.

Good luck,
Idan.