Posted on by

Dropdown Selectors: limit selections based on another selector

A not-uncommon scenario in a form is the case of City/State selectors. If the user chooses a state, it would be nice to let them choose the city without seeing cities from other states. This same principle can apply to many situations where the value of one selector is used to limit the selections available in another.

This kind of thing typically requires some fairly complex code because real-world forms applications tend to be complicated. Most of the time, if you need this kind of dynamic behavior in your form, you’re either going to code it yourself if you’ve got the skills or hire someone with the skills to do it.

An Example of Optgroups in a Dropdpwn Selector

A Simple Approach

What if all we needed was something simple like our first example?

There is a way to do this that doesn’t require a lot of code, as long as all the options can be present when the form is loaded, and there is a simple relationship between the two selectors. The basic idea is you have a “parent” selector and a “child” selector. The parent selector determines which options are available in the child selector…in our example the parent is the state selector and the child is the city selector.

Note: this tutorial won’t work for Chosen selectors, it is for regular dropdown selectors only.

Here is How That Gets Set Up

The way this works is the child selector’s options are divided into groups using “optgroups” that correspond to the selections in the parent selector. For example, if you’ve got 25 states, the city selector will have 25 optgroups that have labels that match the states. Each of those optgroups will contain the cities for that state. This way, we know that when a state is selected, we can use the value of that selection to find it’s corresponding group in the cities, and only show the members of that group: the cities in that state.

In Participants Database, the cities dropdown is set up with a values string like this (this is not the complete string, just enough to show how it is structured):

Alabama::optgroup, Birmingham, Montgomery, Mobile, Huntsville, 
Alaska::optgroup, Anchorage, Arizona::optgroup, Phoenix, Tucson, 
Mesa, Chandler, Gilbert, Glendale, Scottsdale, Tempe, Peoria, 
Surprise, Arkansas::optgroup, Little Rock, California::optgroup, 
Los Angeles, San Diego

And the “state” selector gets a values string like this:

Alabama::AL, Alaska::AK, American Samoa::AS, Arizona::AZ, 
Arkansas::AR, California::CA

The Javascript

Now…for the code. First, this needs a custom template. If you’re not familiar with how to set one of those up, take a look at the linked article. Our code doesn’t change the body of the template at all, it just adds the javascript that performs the trick of changing which options are available in the child selector. If you want to use a different template, you can just paste the javascript into it and it will work in either a record template or a signup template.

Here is the javascript with plenty of comments to help you understand how it works. All you will need to do is make sure the parent and child field names are set to match what you’re using for the parent and child fields.

Note: this code was updated on February 17, 2017 to allow the child’s value to be shown initially

And just so you can see it in action, here it is in a signup form template. You’ll notice that it is simply inserted at the top, after the PHP close tag and before the <div> tag. When the template is loaded the script goes into action, putting a handler on the parent field so that when a selection is made, the child selector will show the appropriate selections.

 

 

8 thoughts on “Dropdown Selectors: limit selections based on another selector

  1. This works well, thank you. However, when I have the same child options for multiple parent fields it wont show up at any of them accept the first one. I am creating a sign up sheet where people can select their master and based upon that their track. However some tracks, such as EE, fall under two masters Geoscience and Civil Engineering. I’ve entered it for both masters but it only shows up for one and is not an option for the other. how can I avoid this?

    1. The “title” part of each option in a dropdown must be unique. This has nothing to do with the functionality described in this tutorial, it is generally true for all fields with options.

      As you may know, each value in the dropdown (or any field that has options) can have two parts: a title and a value. If you need to have two of the same value in your dropdown, each one must have a different title. The title is the first term of each pair separated by a double colon…for example in my city dropdown I might have:

      Hawaii::optgroup,Wailua::Wailua,Kauai::optgroup,Wailua Kauai::Wailua

      This allows the options to have two cities named Wailua. I know this is not optimal, it can appear redundant in a dropdown that uses optgroups, but for historical reasons, it has to be the title that is unique.

  2. Hello
    how to make the user receive his detailed form at the same time as the private link in the registration confirmation email

    cordially

    1. You need to set this up in the email template: you can include information from any value in their submission. The template is in the plugin settings under the “Signup Form” tab and is called the “Signup Response Email”

  3. Could you please post a live example of how we would setup the state and city fields?

    1. That’s possible, but it will take me a while to put that together.

  4. Hi
    Do you have a simple way to make a form field only being required if a specified selector box is selected?
    E.g. Do you have a profile on XXX yes/no
    If yes then enter your profilename here (new form field)

    BTW I love the Participant Database which really makes it for me :D

    1. Typically, something like this would be done using javascript to dynamically change the form validation on the client side. The plugin doesn’t provide this kind of functionality, you’d need to build it into a custom template.

Leave a Reply
You have to agree to the comment policy.

8 thoughts on “Dropdown Selectors: limit selections based on another selector

  1. This works well, thank you. However, when I have the same child options for multiple parent fields it wont show up at any of them accept the first one. I am creating a sign up sheet where people can select their master and based upon that their track. However some tracks, such as EE, fall under two masters Geoscience and Civil Engineering. I’ve entered it for both masters but it only shows up for one and is not an option for the other. how can I avoid this?

    1. The “title” part of each option in a dropdown must be unique. This has nothing to do with the functionality described in this tutorial, it is generally true for all fields with options.

      As you may know, each value in the dropdown (or any field that has options) can have two parts: a title and a value. If you need to have two of the same value in your dropdown, each one must have a different title. The title is the first term of each pair separated by a double colon…for example in my city dropdown I might have:

      Hawaii::optgroup,Wailua::Wailua,Kauai::optgroup,Wailua Kauai::Wailua

      This allows the options to have two cities named Wailua. I know this is not optimal, it can appear redundant in a dropdown that uses optgroups, but for historical reasons, it has to be the title that is unique.

  2. Hello
    how to make the user receive his detailed form at the same time as the private link in the registration confirmation email

    cordially

    1. You need to set this up in the email template: you can include information from any value in their submission. The template is in the plugin settings under the “Signup Form” tab and is called the “Signup Response Email”

  3. Could you please post a live example of how we would setup the state and city fields?

    1. That’s possible, but it will take me a while to put that together.

  4. Hi
    Do you have a simple way to make a form field only being required if a specified selector box is selected?
    E.g. Do you have a profile on XXX yes/no
    If yes then enter your profilename here (new form field)

    BTW I love the Participant Database which really makes it for me :D

    1. Typically, something like this would be done using javascript to dynamically change the form validation on the client side. The plugin doesn’t provide this kind of functionality, you’d need to build it into a custom template.

Leave a Reply
You have to agree to the comment policy.