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!
Views
Replies
Total Likes
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.
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.
Views
Replies
Total Likes
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.
Views
Replies
Total Likes
Views
Replies
Total Likes
Views
Replies
Total Likes
Views
Replies
Total Likes
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.
Views
Replies
Total Likes
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?
Views
Replies
Total Likes
Views
Replies
Total Likes
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.).
Views
Replies
Total Likes
Views
Replies
Total Likes
Views
Replies
Total Likes
Views
Replies
Total Likes
Views
Replies
Total Likes
Views
Replies
Total Likes
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!
Views
Replies
Total Likes
Views
Replies
Total Likes
Views
Replies
Total Likes
Views
Replies
Total Likes
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.
Views
Replies
Total Likes
Views
Likes
Replies
Views
Likes
Replies