Populate dropdown field and pre-select one option for the user

Ask the community
,
1

Hi!

I am struggling with a task which I thought would be simple to accomplish. I am new to Wix so I searched through the forum and code examples but I could not quite get any example, unfortunately. Hope anyone could help me, please.

  1. I have a dropdown field on my page (“dropdownmenu”).
  2. I am populating the options of the dropdown box through a query (note: the dropdown box is not connected to a database because I need to query and filter the table to avoid duplicated entries)
  3. Then, I would like that the dropdown box shows one specific option (e.g., $w(“#dropdown”).value = my_selected_option).

I thought I can use the .value method but somehow it seems that when below code $w(“#dropdownmenu”).value = selected_menu2 is running, the dropdownfield is still not properly setup. I think I do not quite understand how the onReady logic should work, is there some sync issue to take into account?

Thanks for your help!

This is my code:

import {session} from ‘wix-storage’;
import wixData from “wix-data”;

$w.onReady( function () {

wixData.query(“Menuprices”)
.ascending(“title”)
.find()
.then( (res) =>{
const uniqueFieldValues = getUniqueFieldValues(res.items, “title”);
$w(‘#dropdownmenu’).options = buildOptions(uniqueFieldValues);
console.log(“Dropdown Initialised!”);
}, (error) => {
console.log(error);
});

// the session value “selected_menu” is set on another page and then this page, where the
// code here is given, opened
const selected_menu2 = session.getItem(“selected_menu”);

// the console log outputs a defined value for selected_menu2
console.log(selected_menu2);

// THIS HERE DOES NOT WORK
$w(“#dropdownmenu”).value = selected_menu2;
$w(“#dropdownmenu”).resetValidityIndication();

});

// remove duplicates
function getUniqueFieldValues(items , field) {
const FieldValuesOnly = items.map(item => item[field]);
return [… new Set(FieldValuesOnly)];
}

function buildOptions(uniqueList) {
return uniqueList.map(value => {
return {label:value, value:value};
});
}

2

You can’t assign a value that is not included in the options.
Since the “options” property in your case is a result of a promise, you should assign the default value inside the “then” block after you assigned the options.

3

Hi J.D.,

Many thanks for your suggestion. Makes sense to me! Alas, I tried to change the code but same problem persists. This is how I changed the code, hope this is what you suggested:

wixData.query(“Menuprices”)
.ascending(“title”)
.find()
.then( (res) =>{
const uniqueFieldValues = getUniqueFieldValues(res.items, “title”);
$w(‘#dropdownmenu’).options = buildOptions(uniqueFieldValues);
console.log(“Dropdown initialised and options set!”);

  // get the session variable

const selected_menu2 = session.getItem(“selected_menu”);
console.log(“Selected Menu is”);
console.log(selected_menu2);

  // set the DROPDOWN VALUE HERE 
  $w("#dropdownmenu").value = selected_menu2; 
  console.log("Dropdown field value set!"); 
  console.log($w("#dropdownmenu").value); // <-- this is empty! 

}, (error) => { 
console.log(error);

});

Could you help, please?

4

@steffenheinz , are you sure selected_menu2 is included in the options values (the values, not the labels)?
To make sure you use the same value in both place you can run this testing code at the bottom of the “then” block:

let defaultOption =  $w('#dropdownmenu').options.find(o => o.value === selected_menu2);
typeof defaultOption === 'undefined' ? console.log("selected_menu2 value is NOT included in the options") : console.log("Value found");
//This test won't work on Internet Explorer
5

@jonatandor35 Thank you so much! Yes, indeed there was a problem. The values of “selected_menu2” had some whitespaces at the end which are not present in the options, and that led to a mismatch! I am so grateful! Many thanks for your help!
Best,
Steffen

6

@sheiseoul you’re welcome.