Hi Everyone!
I have been in trouble for a long time, I am very thankful that you will help me.
I have created two dropdowns. In which the first one is { “#cityNameDropdown” } which is connected to the { “#dataset5” “Delivery Cities” } contains multiple cities which redirects to dynamic pages when clicked except Delhi city.
And the other one is { “#cityLocationDropdown” } which is connected to the { “#dataset4” “Delhi” } .disable on load, .onChange with { “#cityNameDropdown” } .enable only when city Delhi is clicked and having Delhi’s multiple locations which redirects to their dynamic pages. Both are working well.
My query is that there is a text element on my website Header, which I have named Choose City and whose ID is { “#deliveryCityText” }. I want that whichever city is selected except Delhi from the { “#cityNameDropdown” } or if Delhi is the city selected than whichever Delhi’s location is selected from the { “#cityLocationDropdown” }, it’s value displays in { “#deliveryCityText” } even after changing every page, it should not be changed until it is changed back from dropdown.
For example, you can check some other web by visiting cake24x7 with extension .com
Because I do not know much of coding, please tell the code by giving a little detail with example if possible.
I have written this code by reading several wix articles but all are not working in my { “#deliveryCityText” }.
import wixLocation from 'wix-location';
import wixData from 'wix-data';
$w.onReady(function () {
wixData.query("Delhi")
.limit(100)
.ascending("title1")
.distinct("title1")
.then(r => {
let options = r.items;
options = options.map(e => { return { label: e, value: e }; });
$w("#cityLocationDropdown").options = options;
});
});
export function cityLocationDropdown_change(event) {
$w("#dataset4").setCurrentItemIndex(event.target.selectedIndex)
.then(() => {
wixLocation.to($w("#dataset4").getCurrentItem().title2);
});
}
$w.onReady(function () {
$w('#cityLocationDropdown').options;
$w('#cityLocationDropdown').disable();
$w('#cityNameDropdown').onChange(() => {
if ($w('#cityNameDropdown').value === 'Delhi') {
$w('#cityLocationDropdown').options;
$w('#cityLocationDropdown').enable();
} else {
$w('#cityLocationDropdown').value = '';
$w('#cityLocationDropdown').disable();
}
});
});
export function cityNameDropdown_change(event) {
$w("#dataset5").setCurrentItemIndex(event.target.selectedIndex)
.then(() => {
wixLocation.to($w("#dataset5").getCurrentItem().titleLink);
});
}
$w.onReady(function () {
wixData.query("Delivery Cities")
.eq("titleMain", $w('#cityNameDropdown').value)
.find()
.then((results) => {
$w('#deliveryCityText').text = results.items[0].value;
console.log(results.items);
})
.catch((err) => {
let errorMsg = err;
});
});