Drop Down Linked to URL

Ask the community
,
2

How to work with dropdowns connected to databases?

Your Setup:

  1. You have a dropdown on your page: → ID: “#dropdown1”
  2. You have a DATABASE: —> DB-ID: “My-Collection”
  3. Where you have stored all your links in a certain DB-FIELD: → FIELD-ID: “url”

Now lets create & fill the dropdown…

import wixData from 'wix-data'; 
  
$w.onReady(async function() {   
  const allUserItems = await get_Data("My-Collection"); console.log(allUserItems);
  create_UniqueDropdown(allUserItems, "url", "dropdown1");       
});    
   
function create_UniqueDropdown(items, dbfield, dropdown) { 
    const uniqueTitles = getUniqueTitles(items); $w(dropdown).options = buildOptions(uniqueTitles); 
    function getUniqueTitles(items) {const titlesOnly = items.map(item => item[dbfield]); return [...new Set(titlesOnly)];}
    function buildOptions(uniqueList) {return uniqueList.map(curr => {return {label:curr, value:curr};});}
}

That means, all you have to do now is…

  1. Creating a Collection/Database which is called “My-Collection” (of course you can change the name, but do not forget to change the name also inside CODE).

  2. Generating /Creating a Database-Field → “url” ← (of course you also can change the name/id of this db-field, but do not forget to change it also in your code).

  3. Adding a dropdown onto your wished page, calling it → “#dropdown1”<–, or however you want (do not forget to…).

  4. Copy&Paste this code to your page.

  5. Enjoying the RESULT!

Have fun and good luck!

And do not forget to like it, if you realy liked it :wink: