About Dropdowns
Dropdown elements can be used in forms, as navigation menu's, in search functions and more. In most cases, when a dropdown does not work as you intended you can look at the settings, logic or code connections to fix the problem. Here are some Good to Know items that may help you figure out how to fix your error:
Good to Know #1
Dropdown List Connection
Your dropdown element can connect to a list of items in two different ways. The first way is to Connect a List through the same or different dataset on your page to automatically populate options based on a Field or Column in one of your Database Collections.
Example: Connecting a list through a Dataset
Let's say you created a form where Soccer Teams can sign up on your website to participate in events. Perhaps they filled out a form that asks for their Team Name and saves their information in a Database Collection called 'Team'. Now you are creating a form that a Soccer Team can use to sign up for an event. You can add a dropdown element to the page and connect it to a separate Dataset connected to the 'Team' Database Collection. This dropdown element is used for a question on your form that says: "What team would you like to play against?". You can add the options by selecting the Label and Value connects to the 'Team
Name'. Now all options in your dropdown element will have all of the Team Names that have registered on your site.
Example: Connecting a list through a Dataset
The second way to connect a list of items to a dropdown element is by clicking on "Manage Items" to duplicate an item, add an item, delete an item or edit an item. You can edit the Label and Value by click on the three dots next to the item.Â
Understanding: Label vs Value
The label is the information that will be displayed in the dropdown element, and the Value is the actual data that will be saved in your Database Collection if that item is selected. For example, let's say you have a label that says "I like to exercise" but the value is only "exercise". Or another example would be if you are using a dropdown element to perform a quote or calculation, so possibly your label would be "Extra Cheese" and the value would be "10".
Instead of adding each item individually, you can also add multiple items at once by clicking the words underneath the 'Add A List Item' button that say "Add Multiple Items at Once".Â
This will open up a panel to allow you to add your items Labels and Values at once. To do this, you must follow a specific pattern so that the options are populated correctly on your options list. The pattern is a Word, a Coma, and another Word. The first Word is the Label and the second Word is the Value of the item. Notice there is no space in between the words and the coma. Each item is listed on a separate line.
Good to Know #2
Database Permissions
Perhaps your dropdown list is being populated by Connecting a List (a dataset). Make sure your permissions for adding, viewing, editing and deleting are set correctly on your database. Click on the settings icon located to the right of your database to open up the permissions panel to double check your current settings.
Who can Read / See:
If your settings are "Site Member", "Site Member Author" or "Admin" then make sure you are signed in as the appropriate type on your live website before testing.
Good to Know #3
Database Syncing
If your dropdown element is being populated by Connecting a List and you added database information in your Sandbox Database Collection, then make sure you synced your editor information to the Live Database. Click on your database to open up the collection control panel visible at the top of your database fields. Click on 'Sync' to send all of your information to the live database. (Before you are able to Sync, make sure your database exists on your Live website, meaning you have to Publish your site changes first.)
Sandbox vs Live
You can enter information into your Database Collections from the editor Sandbox area or the Live Database area (located in your Wix Account Dashboard). The Sandbox area is usually used for testing code purposes. The Sandbox, which is located inside of the Wix editor, holds information that is not visible on your website unless you publish or sync your data. Â
Good to Know #4
Publish Your Site
Another tip if you are Connecting a List through a dataset and you have made new changes, like added new Fields or Columns in your Database Collection then save and publish your changes so your Live Database Collections are updated to reflect the changes on your live site.
Refresh Browser Tab
After publishing your site, make sure you refresh your browser or close it and open your live website again before testing.
Good to Know #5
Dataset Mode Settings
Regardless if you added your items manually or connected a list through a Dataset, it is important to check the Dataset Modes for all Datasets on your page. A Dataset on your page is the element that connects your Data from your Database Collection. Make sure the correct Dataset Mode is selected in the Dataset settings because having the wrong Dataset Mode can cause dropdown element to become Disabled. Click on the Dataset icon then click on "Manage Dataset".  If you are trying to display data on your page using regular text and images, then the mode should be set as "Read-Only". If you are using user-input elements to display data from your Database Collection that will be edited, then the mode should be set as "Read & Write". If you are using user-input elements to collect information, then the mode should be set as "Write-Only".
Having the wrong dataset mode at the wrong time could cause your Dropdown element to become greyed out or disabled. For example, your intention may be to allow a user to update existing data or add new data into the dropdown element so you mark the dataset mode as "Read & Write". But what if the record does not exist when the user first opens or views your form? This means that "Read & Write" will cause the dropdown element (and all other element) connected to your dataset to be disabled because no record exists to be viewed (therefore no record is available to be edited. In this case, you would need to change the logic of your user flow. Meaning you may want to create another form set to Write Only to create the record first or you could add code to create a record before the user lands on that particular page so they can begin editing the existing record (even if some or all of the values are blank).
Author
by Code Queen
Stuck on a project? Hire Code Queen, LLC!
Schedule a phone call or video call directly online. In a different time zone? No problem! Code Queen currently has clients around the world.
Online Booking: Discovery Session
Contact Form: Send project details