Till here everything looks good…
import wixData from 'wix-data';
var DBFIELDS = [], ITEMS1, ITEMS2 //<-- ATTENTION HERE ! ! !
//-------- USER-INTERFACE -------------------------------------------------
var txtFieldID1 = "#textBox1"
var txtFieldID2 = "#textBox6" //<-- defined a second Text-Field
var DD_ID1 = "#dropdown1"
var DD_ID2 = "#dropdown2" //<-- defined a second dropdown
var DATABASE = "RegistrationAgeandSkill"
var DBLIMIT = 1000
var OUTPUT_FIELD1 = "ageValue"
var OUTPUT_FIELD2 = "skillValue" //<-- defined a second OUTPUT
DBFIELDS[0] = "age"
DBFIELDS[1] = "skill" //<-- defined a second DB-Field
//-------- USER-INTERFACE -------------------------------------------------
What happens here?
await wixData.query(DATABASE)
.limit(DBLIMIT).find()
.then(results=> {
ITEMS1 = results.items
create_UniqueDropdown1(ITEMS1);
//create_UniqueDropdown2(ITEMS2);
});
A DABASE gets queried and as output you get some results (all results of DB).
Then you send these results to the function → “create_UniqueDropdowns”. This function will (like the name already says) populate a dropdown with unique values from the queried DB.
Here the function recieves the RESULT_DATA…(items)
function create_UniqueDropdown1(items) {
const uniqueTitles1 = getUniqueTitles1(items);
$w(DD_ID1).options = buildOptions1(uniqueTitles1);
function getUniqueTitles1(items) {
const titlesOnly = items.map(item => item[DBFIELDS[0]]);
return [...new Set(titlesOnly)];
}
function buildOptions1(uniqueList1) {
return uniqueList1.map(curr => {
return {label:curr, value:curr};
});
}
}
and populates a dropdown —> using → DBFIELDS[0] → “age”
Yes, now you need a second populate-dropdown part…
function create_UniqueDropdown2(items) {
const uniqueTitles2 = getUniqueTitles2(items);
$w(DD_ID2).options = buildOptions2(uniqueTitles2);
function getUniqueTitles2(items) {
const titlesOnly = items.map(item => item[DBFIELDS[0]]);
return [...new Set(titlesOnly)];
}
function buildOptions2(uniqueList2) {
return uniqueList2.map(curr => {
return {label:curr, value:curr};
});
}
}
… which will take the same DB-RESULTS but will have another IN & OUTPUT.
INPUT —> DBFIELDS[1] = “skill”
OUTPUT —> var OUTPUT_FIELD2 = “skillValue”
Your last step, would be also to add a code-part, which should be able to start all these actions when do changes in the second dropdown.
$w(DD_ID2).onChange(()=>{
let INDEX = $w(DD_ID2).selectedIndex
$w(txtFieldID2).value = ITEMS2[INDEX[OUTPUT_FIELD2];
});
Or better sayed, which will take the results of the already queried DB-RESULTS.
You choose → dropdown1 → ITEMS1 will be loaded.
You choose → dropdown2 → ITEMS2 will be loaded.
