Conditional Dropdown Input Fields

ATTENTION: THIS IS OUR OLD SITE. TO SEE OUR NEW WEBSITE, CLICK HERE.

It is often helpful to break up large lists into conditional lists when requiring users to choose options from a dropdown menu. For example, when a city input is required from a dropdown list - it is easier for the user to pick their region first and then be presented a shorter list of locations within the selected region to choose from.

The screenshot below shows a conditional dropdown input. In this case the Region field is enabled on page load while the Sub-Region is disabled on page load. Once the Region has been selected (Canterbury in this case), then other options in the Sub-Region are made available using code. The options of each dropdown will be defined using code. Connect both dropdowns to the dataset and fields you would like the input data to be saved. Ensure that the dataset you are saving to is write-only and that the collection has the appropriate user permissions. Give each dropdown input an alias (iptRegion and iptLocation in this example). Add an onChange event listener to each button.

The options for the conditional dropdown inputs are stored as a collection (called Region), similar to the screenshot below. There is a region field, a sub-region field called location and a numeric field to maintain a predefined sort order for the regions and sub-regions. Each region entry is repeated for every sub-region (or location) entry and will be de-duplicated on use. You do not need to add the dataset with the dropdown options to your page - the collection will be referenced directly using code. Dropdown options should be mutually exclusive - so for this example we have 'Other or Not Specific' as an option to account for smaller locations not listed, or if all of the region is sought by the user.

The uniqueRegion function populates the iptRegion dropdown menu with de-duplicated regions from a collection called Region. The function is run onReady to populate the iptRegion dropdown as soon as the page loads. The regions list is sort ordered by the orderBy variable found in the collection, which predefines the order in numerical value. You don't need an explicate orderBy field in your collection. You could order alphabetically by the region field itself or not order at all.

import wixData from 'wix-data';

$w.onReady(function () {
	uniqueRegion();
});

// this code populated the Region dropdown
function uniqueRegion(){
  wixData.query('Region')
  .limit(1000)
  .ascending('orderBy')
  .find()
  .then(results => {
    var uniqueTitles = getUniqueTitles(results.items);
    $w("#iptRegion").options = buildOptions(uniqueTitles);
  });

  function getUniqueTitles(items) {
    const titlesOnly = items.map(item => item.region);
    return[...new Set(titlesOnly)];
  }

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

}

The uniqueLocation function populates the iptLocation dropdown menu with locations (or sub-regions) from a collection called Region. This function is not called onReady as we don't know which Region has been chosen by the user yet. However, once the region is chosen, the Region collection is filltered to only include locations from this region.

// this code populated the Location dropdown
function uniqueLocation(){
  wixData.query('Region')
  .eq('region', $w('#iptRegion').value)
  .limit(1000)
  .ascending('orderBy')
  .ascending('location')
  .find()
  .then(results => {
    const uniqueTitles = getUniqueTitles(results.items);
    $w("#iptLocation").options = buildOptions(uniqueTitles);
  });

  function getUniqueTitles(items) {
    const titlesOnly = items.map(item => item.location);
    return[...new Set(titlesOnly)];
  }

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

}

Once a region is selected, the iptRegion_change function enables the iptLocation dropdown for input and populates it with locations within the selected Region.

export function iptRegion_change(event) {
  // once a Region is selected, the Location dropdown is populated and enabled
  uniqueLocation();
  $w("#iptLocation").enable();
}

Please login or sign-up (it's free!) to view our code. Refresh the page if already logged in.

Disclaimer: To the best of our knowledge, this code works for its stipulated purpose. If you find an error in our code, or know of a better way to achieve the same result - please contact us! We will help where we can, however please be aware that the code is provided 'as is' and without a promise of support in using or implementing it.

Browse More Code

VeloCodeBank

take your Wix website to the next level

<Welcome>

Conditional Dropdown Input Fields

ATTENTION: THIS IS OUR OLD SITE. TO SEE OUR NEW WEBSITE, CLICK HERE.

Once a region is selected, the iptRegion_change function enables the iptLocation dropdown for input and populates it with locations within the selected Region.

Please login or sign-up (it's free!) to view our code. Refresh the page if already logged in.

Contact Us

© VeloCodeBank