How can I create nested dropdowns?

  • Profile Image
    Alsalemjci
    Asked on August 28, 2017 at 01:40 AM

    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

  • Profile Image
    Jim_R
    Answered on August 28, 2017 at 03:00 AM

    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.

  • Profile Image
    Alsalemjci
    Answered on August 28, 2017 at 06:47 AM

    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

  • Profile Image
    Jan
    Answered on August 28, 2017 at 09:04 AM

    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.

  • Profile Image
    Alsalemjci
    Answered on August 28, 2017 at 09:37 AM

    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

  • Profile Image
    John_Benson
    Answered on August 28, 2017 at 11:08 AM

    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.

  • Profile Image
    Alsalemjci
    Answered on August 28, 2017 at 12:26 PM

    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

  • Profile Image
    BDAVID
    Answered on August 28, 2017 at 01:18 PM

    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.

  • Profile Image
    Alsalemjci
    Answered on August 28, 2017 at 03:46 PM

    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.

  • Profile Image
    BDAVID
    Answered on August 28, 2017 at 04:57 PM

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