Multiple Dependent Dropdown Menus in ES3

[Ggyy]

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!

[Magus069]

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.

[Ggyy]

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

[Ggyy]

Hi Magus069,

Thank you for all your input. I am sorry I have not responded in some time, but I had been traveling for the past month. Your suggestions helped solved the issues I had, but there are still some minor ones that linger.

For example, there is a point where the drop-down menus stop working correctly. If open the form and select Africa, Ethiopia, and Addis Ababa, that works fine. I can switch cities in Ethiopia without issues.If I change the country to South Africa, it resets the city to blank and I can select the city and change them if necessary. I can go back to Ethiopia and its cities without issues. However, if I change the continent to Europe, it clears the country but not the cities. Those remain stuck in the Ethiopian cities. I can go back to Africa and is works fine.

You can find the most recent file here: https://gofile.io/d/GSTj4t

One more issue that I am having is that on the original form that I am working on, the drop-down fields are required. This ends up giving me an error every time I select a drop-down as the other ones have not been selected. This is not happening on the attached form but, for example, if I selected a continent, it would give me an error saying the country needs to be selected. If I then select the country, then an error pops up saying I need to select a city.