Dependant dropdowns

Ask the community
,
1

Hi all

I have read a few posts about enabling conditional or dependant dropdowns but I have failed to get it to work on my site.

I need:

  • 2 drop downs, one is vehicle Make , the other is vehicle Models. The dropdown options for Models must be filtered based on Make selected. These are kept in a collection called ’ MakeModel’.
  • Both dropdowns’ placeholder (onReady) values need to be pulled from a collection named ‘Users’ which holds current user info.
  • When a new Make ( dropdownMake ) is selected the options ( newModels ) for the second drop down ( dropdownModel ) need to update based on the new selection (variable newMake ).
  • The placeholder of the second dropdown also needs to change to the first available model option in the new filtered list ( newModels )
  • Upon update and submission of these new selections values for Make and Model dropdowns need to be submitted to the ‘Users’ collection to update the user’s choice (this is currently managed via the UI not in code).

Please see my attempt at the above in code:

import wixData from 'wix-data';
import wixUsers from 'wix-users';

$w.onReady(function () {

	let currentUserMake;
	let currentUserModel;
	let currentUserModelOptions;
	let newMake;
	let newModels;

	//get current user make
	wixData.query("Users")
		.eq("_id", '${wixUsers.currentUser.id}')
		.find()
		.then((results) => {
			currentUserMake = results.items.vehicleMake;
		});

	//apply current user make to dropdownMake value
	$w('#dropdownMake').value = currentUserMake;

	//get current user model
	wixData.query("Users")
		.eq("_id", '${wixUsers.currentUser.id}')
		.find()
		.then((results) => {
			currentUserModel = results.items.vehicleModel;
		});

	//apply current user model to dropdownModel value
	$w('#dropdownModel').value = currentUserModel;

	//find current relevant models
	wixData.query("MakeModel")
		.eq("Make", currentUserMake)
		.find()
		.then((results) => {
			currentUserModelOptions = results.items.model;
		});

	//apply current relevant models to dropdownModels options
	$w('#dropdownModel').options = currentUserModelOptions;

	//on change of make, update dropdownModel.options with result of wixData query for chosen make
	$w('#dropdownMake').onChange(() => {
		newMake = $w('#dropdownMake').value;

		wixData.query("MakeModel")
			.eq("Make", newMake)
			.find()
			.then((results) => {
				newModels = results.items.model;
			});

		$w('#dropdownModel').options = newModels;
		$w('#dropdownModel').placeholder = '- Please select -'; //Placeholder is first entry from updated model options list
		$w('#dropdownModel').enable();

	});
});

Note that I am also connecting the dropdowns to collections via the Wix UI so as to avoid having to do this in code (as it works well). Not sure if I need to disable this and then replicate in code to make this work.

Im fairly new to code so I suspect there are syntax issues as well. When run in preview mode the above code gives the error ‘Wix code SDK Warning: The options parameter that is passed to the options method cannot be set to null or undefined.’

It also doesnt work at all. The fields dont populate with current user selection of ‘Users’ dataset and when selecting a different Make (options for which have been added via the UI manually) the Models dropdown doesnt show anything its just blank with a red box around it.

Please help…

thanks

2

Hi,

Welcome to the Wix Code forums.

Play with the Cascading Form example to learn how this is done. You can load the example in the editor, play with it and change it. Then, when you’re ready, you can just adapt the code to use for your site.

Good luck,

Yisrael

3

Hi again,

Your code is using the results of the query improperly. They are only available within the .then() , which is where the Promise (of a database query) is fulfilled.

See the forum post Promises, Promises for a gentle explanation of how Promises (and asynchronous programming) work. For a more detailed explanation, see the article Working with Promises in Wix Code .

Good luck,

Yisrael

4

Thanks Yisrael ill have a look at what youve shared.

5

Hi Yisrael, I have made progress on this issue so thanks for your help so far. I would like to input all car models (for a specific make) into 1 field in the MakeModel collection as an array. In this way when I query the collection for a given make, it returns all models as an array - i then pass this to $w(modelDropdown).options to populate the dropdown.

I am having trouble importing data (from csv) as an array format into the collection. Are you able to assist with this? What syntax doe I use in the csv to allow data to be imported as an array using the “import” function in the Wix UI.

thanks
J

6

In your MakeModel field, you would need to use a JSON object, or a comma separated string, to use as an array. You would need to manipulate the field and array by yourself in code. Support for arrays in a field is a feature that is currently being worked on, but there is no ETA.

For details regarding importing data to a collection, refer to the article About Importing Data to Your Collection in the Content Manager .

I would suggest a collection with the fields: Make, Model. Getting all models of one make is then a simple query.