Multiple Dependent Dropdown Menus in ES3

Avatar

Avatar

Ggyy

Avatar

Ggyy

Ggyy

09-03-2021

Hello!

 

I know this question has been asked in the past before, but I cannot find a clear step-by-step solution for what I would like to accomplish.

 

I need to have three dropdown menus where two are dependent on the previous dropdown menu selections. For example, using vehicles: Year, Make, Model. The Year dropdown would have a list of the years, the Make dropdown would base the vehicle manufacturer shown on what was selected in the Year dropdown (some manufacturers did not exist in certainyears), and the Model dropdown would base the vehicle models shown on what was selected in the Make dropdown. A similar scenario would apply with Countries, State, Cities.

 

What would be the easiest way to accomplish this? I have tried switch statements on both exit and pre-open for the dropdowns, but always end up with a pop-up warning that the field "cannot be left blank" upon selecting the dropdown arrow for the second dropdown box.

 

Thank you!

Accepted Solutions (0)

Answers (3)

Answers (3)

Avatar

Avatar

Magus069

MVP

Avatar

Magus069

MVP

Magus069
MVP

09-03-2021

Hi there,

 

It is important to know how is your data stored? How do you request your data to populate your drop down lists?

 

If you populate based on embed form data, it is possible to populate a dropdown list on the exit event of the other, but in my experience I'd rather populate them within their own initialize event, and say as soon as I'd exit the previous drop down, I would execute the following drop down's initialize event like this:

Dropdown1.execInitialize();

 

When doing so it's important to take note that any selected value within the following drop down, may be altered if the previous selected value has been changed.

 

Let us know how you proceed gathering the lists items.

Avatar

Avatar

Mickeymouse1980

Avatar

Mickeymouse1980

Mickeymouse1980

10-03-2021

  • 1 dependant

Avatar

Avatar

Ggyy

Avatar

Ggyy

Ggyy

09-03-2021

Hi Magus069!

 

Thank you for the response.

 

The data being used will reside in the form and it is really not that much. So you have an idea, the first dropdown will have five items from which users can choose. The second dropdown has a total of 15 items, but the most you will have available to choose from is about 4, depending on what users choose in the first dropdown. The third dropdown has a total of about 130 items, but should display a maximum of about 15, depending on what users choose in the second dropdown.

 

I hope this provides some clarity.

Magus069

Hi there,

 

so how are you storing that data in the form? Are you using arrays within arrays, or maybe JSON objects? How do you determine what item list to use when a value is selected?

Once you have selected a value within the first drop down, by extracting the correct items you will populate the next drop down, either by using setItems for the whole array object or addItem for each items from your collection.

When a value is changed from a "Previous drop down", you may want to reset the following drop down values in case the item value doesn't exist anymore.

 

Ggyy
The way the form is set up right now is for each dropdown to have its own list added under List Items in the Field tab. It is simple, but prone to errors once you get to the third dropdown. So unless ES3 is doing this in the background, I have not set up any arrays or JSON objects. I am new to ES3 and to programming in general (I have not done any serious programming in years), so any guidance or steps on how to accomplish this would be helpful. If I need to setup an array for this to work, how would I do that? I am open to any other ways.
Magus069
Hi, well at this point you have 2 different options. Either you create arrays objects with all your items either JavaScript or XML based and load them on the initialize event within the drop down lists. Or you simply create a drop down list field for each different possible lists. One will require you to work out with JavaScript and may requires you to understand a bit more how JavaScript Arrays or JSON/Hash table objects works, or you simply use different fields for each possible lists, and you show/hide the appropriate fields based on the selected value.
Ggyy
Hi Magus069. I think the latter of your suggestions appears to be easier to accomplish for me at this time, but I am willing to learn to do the arrays if it would be a better solution overall. I know I can do it with the proper guidance. Regarding the dropdown lists, how would you show/hide the entries you want displayed based on the previous dropdown selection?
Magus069

Well for the show/hide option, you simply would have to create a drop down field for each possible lists, and by changing their presence property with "visible" or "hidden" you can display the appropriate list based on the previous selected values.

For an example, after you have created each drop down lists and added each items to the appropriate lists, simply have a JavaScript into the exit event of the previous drop down fields that would verify the value selected and then show the right list and hide all the others.

//Exit event of first drop down (Year)? If I remember well
if (this.rawValue == "2005"){
    ddlDropDown2005.presence = "visible";
    ddlDropDown2006.presence = "hidden";
    ddlDropDown2007.presence = "hidden";
    ddlDropDown2008.presence = "hidden";
    ddlDropDown2009.presence = "hidden";
} else if(this.rawValue == "2006"){
    ddlDropDown2005.presence = "hidden";
    ddlDropDown2006.presence = "visible";
    ddlDropDown2007.presence = "hidden";
    ddlDropDown2008.presence = "hidden";
    ddlDropDown2009.presence = "hidden";
}

And so on... this is low maintenance, in case of javascript error you don't have much to verify/validate.

 

Ggyy

Thanks Magus069! I am a bit confused. Is the code for the exit event you posted hiding the years that are in that same dropdown? Shouldn't that be the code for the second dropdown? Also, is "ddlDropDown2006" referring to a dropdown or one specific item in that dropdown list?

Magus069
I was pretending that the year would be the first dropdown list, and it would make a appear or hide the appropriate drop downs to that year exactly... I should've made the example with make or model first sorry. So in that case, ddlDropDownYYYY is the name of the drop down field. that would contain all the model of a given car brand.
Ggyy

Hi Magus069.

 

I am sorry, but I am having trouble understanding. I tried the code in my form and it does not do anything. The general code that you posted, when corrected for the proper dropdown menus, basically should state that in the exit event of the first dropdown (Year), if the value of said dropdown is 2005, then the second dropdown (Make) should show only show specific car makes for that year and hide the others that were not available that year. What I do not get is how do I reference the dropdown text that is in the second dropdown from the first dropdown code?

 

What I see from your initial code is that you are hiding or displaying dropdowns instead of the actual text in the dropdown. This is not what I want to accomplish. Am I misunderstanding?

 

I still feel that this should be something pretty straightforward and easy to accomplish, but I am probably misunderstanding something. Maybe what I want to accomplish is better done in a different way (arrays, etc.).

Magus069
Maybe I'd be more of help if I can see what you are trying to accomplish, how and with what. Could you share your form so I can take a look?
Ggyy
Hi Magus. Sorry this has taken some time. I have a sample form ready. However, I do not see a way to attach the file to my post.
Magus069
You can use any tool that allows you to store files on a cloud, such as DropBox, OneDrive, Google Drive, etc. and leave the link in comment
Ggyy

Here is the link to the sample form: https://gofile.io/d/Ur5ehi

 

Thank you!

Magus069
Hi there, have a look at how I split the countries from a continent into multiple drop downs to be able to have mutiple lists. But it only displays the selected continent countries. https://gofile.io/d/8eMiUG
Ggyy

Hi Magus069,

 

Thanks for the file. I was able to get the first two dropdowns the way I want them. However, I have not been able to get the third one to work. In you sample form, I did not see any code in place to only display the cities associated with a specific country. I tried to copy the structure setup for the second dropdown to the third, but it is not working. I created 15 dropdowns within a subform, similar to what you did for the second dropdown, but it shows all dropdowns superimposed and it defaults to the last one on the list as the top one. It seems like it is not properly detecting the value of the second dropdown. Could you provide some insight or maybe an example of how program the third dropdown on your sample form to only display the cities for the country selected in the second dropdown. Thanks again for your help!

Magus069
Make sure your syntax is good, check the javascript console using adobe acrobat to see if any error pops up, and make sure that you change the name of the dropdown you are checking the value from
Ggyy
I have updated your sample form to reflect what I have. Can you please verify it to see where I am making a mistake? I did not include all countries in the Cities dropdowns for sake of time. The errors that are happening here are the one occuring on my actual form. The "visible" Cities dropdown does not show as it should and all are visible at the same time. The link is: https://gofile.io/d/VBxfnZ
Magus069
The reference syntax is not good. As you are trying to access each countries drop down fields they are included within a subform... to be able to access those fields you would have to write in front of each of them frmCountries and then access the drop down field. So the reference syntax to access the presence would look like this: frmCountries.ddCountryAfrica.presence