-
LukeAsked on May 23, 2017 at 3:11 AM
Hi
Is it possible to add cascading dropdown?
i.e.
Dropdown list for "department" with options to select Finance, IT, Retail etc.
If Finance is selected, another dropdown for Sub department either appears or populates with options relevant to finance... i.e. Payroll, Accounts Team.
If IT is selected the same dropdown has options such as Support, Project etc.
Thanks
Luke
-
cem JotForm DeveloperReplied on May 23, 2017 at 3:34 AM
Hey Luke,
You can use "Dynamic Dropdown" widget for this purpose.
Firstly, if you have not add any widget to your forms, you can follow this guide to learn how to add a one:
https://www.jotform.com/help/252-How-to-Add-a-Widget-to-your-Form
Afterwards, you can find this widget by using search field in widgets section
After adding a dynamic dropdown to your form, please edit the values field by following the notes below it to successfully create your cascade dropdown.
If you need to ask any question please feel free to ask it.
Thank you for writing us.
Have a nice day!
-
CathKidstonITReplied on May 23, 2017 at 4:50 AM
Thanks very much for your reply.
I have managed to add the dynamic dropdown with your help no problem!
Im wondering.... is it possible to have the dynamic top downs next to each other, rather than appearing one on top of each other?
-
liyamReplied on May 23, 2017 at 6:37 AM
Hello,
Yes, you can. By default, fields expand its width to the actual size of the form. By shrinking it, it will it will only be on a limited size up to the extent of the field, and by then that you can put your fields to sit next to each other, containing what can fit on the width of the form.
Please check this guide for information on how to make this happen: https://www.jotform.com/help/90-Form-Field-Positioning
-
liyamReplied on May 23, 2017 at 6:52 AM
Sorry, I spoke too early and of a different method.
Yes, you can set your fields on the widget to sit next to each other still. To do this, you need to insert this CSS code into your widget:
select {
float: left !important;
clear: none !important;
}On how to insert the code, you need to click on the Widget Settings Wizard > Custom CSS then insert the code.
Don't forget to click the Update widget button at the bottom after inserting the code.
If you have questions, please let us know.
Thanks.