In certain situations, you need presenting the selectable information to users in dropdowns which is categorized. For example, consider this scenario:
Choose a maker of cars:
Choose a model based on first selection:
- Modal 1
- Modal 2
- Modal 3
Choose Year of manufacturing based on second selection:
- Year 1
- Year 2
- Year 3
and so on.
So basically, the first selection is linked to second and second to third. If this situation is in a website’s form, then you can manage this by using the linked dropdowns.
So, as a user selects a maker, the related models will be populated in the second select dropdown. Upon selecting a model, the year or manufacturing will be displayed for selecting their option.
Implementing this situation can be complicated; however, there are certain plug-ins that make this job easier. One such plug-in is jQuery-linkedSelect, which is the topic of this tutorial.
I am going to show you a few demos and setting up guide so you may use this in your web projects.
The demos uses JSON data for populating the linked dropdowns. As you select an option from the first dropdown, the second will be filtered and filled accordingly. See the example online:
So how is it done?
First of all, include the Bootstrap CSS file in the <head> section, as this demo uses its classes.
In the markup section, create a dropdown by <select> tag where a few data attributes are used:
For specifying the target <select> tag, use:
Where “select-2” is the name of targeted <select> tag.
There you will also specify the data source, which is a JSON file:
and the filter:
data-select-service-asfilter="item.minVersion < this.value">
The first <select> tag is given a few static options. As you select a value, the options for “select-2” will be filtered and populated where data-select-target and data-select-service are also specified for the third targeted <select> tag, which name is select-3, in that case.
See the complete code on the demo page.
In this example, the four level linked dropdowns are created. So you can say, the main category, category, sub-category, and products or you may categorize this as you need:
The third linked drop-down specifies the next and so on.
Get the complete code on the demo page.