I will try and explain this the best I can…
I have a Dynamic Page set up which has a dropdown menu to move through the different pages using the ‘number’ field of my dataset. I have most elements hidden on load so that a ‘welcome’ page shows when the user first enters the page which works fine. In one of the rows of my dataset I have ‘Select Number’ in the number field - I have this set up purely to use as part of the Dynamic Page url otherwise I have to pick one of the numbers and that looks a bit daft when it doesn’t change as users pick different numbers from the dropdown. The downside of doing this is that it automatically creates a page for this item and adds ‘Select Number’ to the dropdown menu.
To allow me to work with the hidden elements where necessary and also to allow me to make the ‘Select Number’ page identical to the ‘welcome’ page I have set up the following code on the page:
import wixLocation from 'wix-location';
import wixData from 'wix-data';
$w.onReady(function () {
UniqueDropDown();
PageChange();
});
function UniqueDropDown () {
wixData.query('Class20LocoData')
.ascending('ddSort')
.limit(1000)
.find()
.then(results => {
const uniqueNumber = getUniqueNumber(results.items);
$w('#numberDropDown').options = buildOptions(uniqueNumber);
});
function getUniqueNumber(items) {
const numberOnly = items.map(item => item.number);
return [...new Set(numberOnly)];
}
function buildOptions(uniqueList){
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
function PageChange () {
$w('#numberDropDown').onChange((event) => {
let number = $w('#numberDropDown').value;
$w('#class20LocoData').onReady(() => {
console.log("The dataset is ready to be filtered.");
$w('#class20LocoData').setFilter(wixData.filter()
.eq("number", number)
)
.then(() => {
console.log("Class 20 Loco Data dataset is now filtered with the matching number from the dropdown");
let getItem = $w('#class20LocoData').getCurrentItem();
let url = getItem.url;
})
.catch((err) => {
console.log(err);
});
});
});
}
export function numberDropDown_change(event){
let value = event.target.value;
if (value > 0) {
$w('#text479').hide();
$w('#text356').show();
$w('#box9').show();
$w('#text475').show();
$w('#text476').show();
$w('#box10').show();
$w('#text477').show();
$w('#text478').show();
$w('#box8').show();
$w('#text418').show();
$w('#text419').show();
$w('#text420').show();
$w('#repeater1').show();
$w('#text472').show();
$w('#image14').show();
}
if (value === "Select Number") {
$w('#text479').show();
$w('#text356').hide();
$w('#box9').hide();
$w('#text475').hide();
$w('#text476').hide();
$w('#box10').hide();
$w('#text477').hide();
$w('#text478').hide();
$w('#box8').hide();
$w('#text418').hide();
$w('#text419').hide();
$w('#text420').hide();
$w('#repeater1').hide();
$w('#text472').hide();
$w('#image14').hide();
}
}
Everything is working as I want it to and all of the pages are showing the elements I want them to. However, when I first enter the page and go from the blank dropdown to selecting another page, the ‘Select Number’ page briefly appears before the correct page is shown. It is not a major problem but it does look a bit untidy and so was wondering if this can be corrected and if so if someone could point me in the right direction please?
If you wish to take a look at what I am talking about, the page is live at https://www.ukraillog.co.uk/class-20-loco-data/select-number - just pick any page (except ‘Select Number’ from the dropdown and you should see what I mean 
Thanks