How can I create nested dropdowns?

Hi, how can I make a dependent drop down list? For example, i want to make a list for region and cities.

When I select Makkah in the city drop down list filter cities under Makkah.

Regards,

Aamir Khan

Hey Aamir - What you're describing can be achieved using the Dynamic Dropdowns Widget.

Related guide: How-to-Add-a-Widget-to-your-Form

This widget would allow you to create nested dropdowns just like the example you have given with regions and cities. Give it a spin and let us know if you'd need more help.

Hi Sir,

Thank you for reply.

What i looking for apart of drop down list it OK but how can i label separate to each drop down list.

This is my form.

https://form.jotform.me/72386709214460

And what i want to to look like. Please see the region and then city.

http://york.com.sa/en/residential/service

Regards,

Aamir Khan

I suggest you use the Show and Hide Field conditions to achieve this function. You can create multiple dropdowns and then create a condition wherein a specific dropdown will only appear if the condition is met.

Please check this demo form: https://form.jotformpro.com/72393658060965. You can clone it if you like to. Here's a guide on how I created that demo form:

1. I inserted 4 dropdown fields.

2. After that, I created a Show and Hide conditions wherein if the "Region" is equal to a certain option, then the related dropdown will appear.

3. I created a total of 3 conditions.

Here's the result:

Related guides:
How-to-Show-or-Hide-Fields-Base-on-User-s-Answer
Hide-or-Show-Multiple-Fields-at-Once

Hope that helps. Thank you.

Hi,

Thank you for the reply. Creating 4 drop-down means data store in 4 differents fields. I need to show in one field. because I am using Microsoft flow to insert data in MS SQL server.

Regards,

Aamir Khan

If you want to show the data in one field only, I recommend using the Dynamic Dropdown widget. If you need further assistance, please contact us again.

Thank you.

Hi, I need some good solution. I am form Johnson COntrols we are the biggest HVAC company in middle east. This form is used to collect customer Complaints. Dynamic Dropdown is showing up and down I need to show next to each other like my form will be 2 column and I need to format as some other fields.

Regards,

Aamir Khan

We can customize the widget with CSS injection, so the dropdown fields will display horizontally:

https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

#customFieldFrame_3{

width: 700px !important;

}

https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets 

#dropdownsContainer select {

    float: none !important;

}

#dropdownsContainer{

    width: 700px !important;

}

Result: https://form.jotformpro.com/72395082940965 

Please setup your Dynamic Dropdown widget, and then let us know, so we can provide you a CSS code to customize it horizontally.

Hi,

Thank you for the reply. But my question my form will be 2 column and how can I show the drop down in e different column and how can I label the separate like region and city.

Unfortunately, that is not possible, the best option would be implementing the suggestion my colleague Jan provided.