Vorbly Code | WIX CODE DROPDOWN OPTIONS FROM DATABASE

Vorbly <Code>

CODING MADE EASY WITH VORBLY

WIX CODE DROPDOWN OPTIONS FROM DATABASE

Need to add options to your dropdown user input? This tutorial will show you how to add options to your dropdown user input from a database with Wix Code. Your visitors will be able to select from a dynamic list with options from your database. We will provide you with the webpage elements and sample codes required to implement this feature.

THE DEMO

1/2

THE ELEMENTS

Dynamic Page

Dynamic Page: /Options/{name}

User Input: #dropdown1​​

The Database

Create a dynamic database Options.

Recommended fields:

  • Product Name: name

  • Dropdown Option Label 1: label1

  • Dropdown Option Label 2: label2

  • Dropdown Option Label 3: label3

  • Dropdown Option Value 1: value1

  • Dropdown Option Value 1: value2

  • Dropdown Option Value 1: value3

THE CODE

Page Code

$w.onReady(function () {

 

    let label1 = $w("#dynamicDataset").getCurrentItem().label1;

    let label2 = $w("#dynamicDataset").getCurrentItem().label2;

    let label3 = $w("#dynamicDataset").getCurrentItem().label3;

    let value1 = $w("#dynamicDataset").getCurrentItem().value1;

    let value2 = $w("#dynamicDataset").getCurrentItem().value2;

    let value3 = $w("#dynamicDataset").getCurrentItem().value3;

 

    $w("#dropdown1").options = [

        { "label": label1, "value": value1 },

        { "label": label2, "value": value2 },

        { "label": label3, "value": value3 }

    ];

    

});

COMMENTS

I'm a paragraph. Click here to add your own text and edit me. It's easy.

No comments. Be the first to leave a comment.

This is you writing every single option.

what if the database (number of rows changes)? Rewriting the code once a user adds an entry?

Matt

Jul 20, 2019

1

Hi Matt,

Thanks for writing to us.

This tutorial guides new users on how to add static options manually.

Please refer to this tutorial (below) on how to add dropdown options dynamically by query a database.
https://www.vorbly.com/Vorbly-Code/WIX-REPEATER-WITH-MULTIPLE-FILTERS

I hope this helps! Cheers!

Andrew (Vorbly)

Jul 21, 2019

1

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP