# Dynamic Select Filtering

Many users utilize the **Select** component within their form to reference resource data stored within their project. This has several benefits which we have covered in previous [**documentation**](https://help.form.io/userguide/form-building/form-components#resource). In addition to data reference, users may also need the ability to dynamically filter a Select dropdown based on the selection of another Select dropdown. 

For this demonstration, we will be creating a Vehicle Registration system. It will take into account a vehicle’s year, make, and model where the model field is dynamically updated based on the make vehicle value selection.

{% embed url="<https://www.loom.com/share/743315a25dbb46debc5331e71a057125>" %}

## Vehicle Make Resource

1. Within a project, create your first Resource called`Vehicle Make`. This will be the initial resource that will trigger the filtering.&#x20;
2. &#x20;Drag and drop a `Text Field` component called `Make Resource`. Within the component settings, click the API tab and take note of the Property Name `makeResource`.

![](https://2053155777-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdE1To8ypyE1yhXEJ7QlD%2Fuploads%2FgMeklCs4hvbJTxQuf5Fz%2Fdynamic1.png?alt=media\&token=df442fb1-6506-4a99-a33d-c52689103b01)

### Establish the Vehicle Make Database&#x20;

1. Click the Use tab of the Resource and create a database by submitting two entries: Ford, Chevy.
2. &#x20;After making the submissions, click on the Data tab and ensure you see the submissions within the data table.&#x20;

![](https://2053155777-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdE1To8ypyE1yhXEJ7QlD%2Fuploads%2FwulYnScXWf2HEPheS4gv%2Fdynamic3.png?alt=media\&token=0a8ae4eb-8d54-4b83-ae9d-bde2a46142cd)

## Vehicle Model Resource

1. Next, create a new Resource called `Vehicle Model`.
2. Add a `Select` component called Make Reference and a `Text Field` component called Model Resource.

![](https://2053155777-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdE1To8ypyE1yhXEJ7QlD%2Fuploads%2F9qblEItYX1HKLGbGOSiz%2Fdynamic4.png?alt=media\&token=0d9f5a4b-17e6-4720-a124-682d07cc083e)

### Make Resource Reference

Next, we are going to configure the Select component to reference the Make Resource data we generated in the previous step.&#x20;

1. Open the `Select` Component settings and click the `Data` tab. Set the `Data Source Type`  to `Resource`
2. Set the `Resource` dropdown to `Make` Resource.
3. Set the `Value Property` field to `Make Resource`.&#x20;

This will ensure the Select component references the Make Resource field data from the Vehicle Make resource.&#x20;

![](https://2053155777-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdE1To8ypyE1yhXEJ7QlD%2Fuploads%2F7RJGxImcGiHzFIJJNvA1%2Fdynamic5.png?alt=media\&token=52ee30d2-d294-48bd-8cb6-07de87eea534)

### Establish the Model Database

With our Make reference in place, we can now tie together the Models with their respective Make.&#x20;

1. Click the `Use` tab for the Vehicle Model Resource.&#x20;
2. Click the Make dropdown to select Chevy, and input a Chevy model in the Model Text Field.&#x20;
3. Make 3 submissions using the Chevy make. e.g.:

&#x20;     `Chevy Camaro, Chevy Equinox, Chevy Silverado`

4. Make 3 submissions using the Ford make e.g.:

&#x20;     `Ford Mustang, Ford Escape, Ford F-150`

![](https://2053155777-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdE1To8ypyE1yhXEJ7QlD%2Fuploads%2F0UoIqZcbDBQfnFJEmIgg%2Fdynamic7.png?alt=media\&token=cb096f94-26b8-48ca-94cf-ea74e88a09f8)

## **Create a Vehicle Registration Form**

Now that we have our database and references established we need a Form to register our vehicles.&#x20;

1 Click the Forms tab and create a new Form called `Vehicle Registration.`&#x20;

2 Add two `Select` Components called `Make` and `Model` and a `Text Field` Component called `Year`.

![](https://2053155777-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdE1To8ypyE1yhXEJ7QlD%2Fuploads%2FoQeUdnDf3IVMl2QqB0ma%2Fdynamica.png?alt=media\&token=65bdcfd9-b9e0-4260-b810-a02d0859fd9c)

### Make and Model Reference

1. Open the `Make`  component settings and set the `Data Source Type` to Resource
2. Set the `Resource` field to Vehicle Make
3. Set the `Value Property` to Make Resource.&#x20;

This is the [**same workflow**](#vehicle-model-resource) as the `Make` Select Component that we set up in the `Model` Resource.

![](https://2053155777-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdE1To8ypyE1yhXEJ7QlD%2Fuploads%2FZBWgdgczmaIazx7NNqi0%2Fdynamic8.png?alt=media\&token=ce69a070-49ab-4082-9859-2fc50a96e5d9)

4. Open the `Model` component settings. Similarly, set the `Data Source Type` to Resource
5. Set the `Resource` field to Vehicle Model
6. Set the `Value Property` to Model Resource.

![](https://2053155777-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdE1To8ypyE1yhXEJ7QlD%2Fuploads%2FuRrI0Ww7XnIThseQgzg8%2Fdynamic9.png?alt=media\&token=1680dd98-5d4a-4010-b52a-4dfe77fd6809)

If we click `Use` for the form in this state, both select dropdowns populate with their respective values. However, the `Model` field isn’t filtering against the `Make` field, which doesn't help us with the filtering we are trying to achieve.

![](https://2053155777-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdE1To8ypyE1yhXEJ7QlD%2Fuploads%2F0oxtHqlXcsPPWwGEyKBA%2Fdynamic10.png?alt=media\&token=11251c0e-edf7-47a8-aa08-55d178fcdb97)

### Adding Filter Query and Setting Refresh Options

To fix this, we need to make some configurations to the Model component.

1. Open the settings for the `Model` Select Component. Within the Data tab, scroll down to the `Filter Query` field which will handle the logic to remove certain Model values when a Make is selected.  Add the following query below which equates the value of the Model Resource Make Reference component against the value of the forms `Make` Select Component:

```
data.makeReference={{data.make}}
```

2. Within the Data settings tab, scroll down to the `Refresh Options On` field and select the Make field. This will ensure the Model values update anytime a change is made to the Make field.&#x20;
3. Finally, check the `Clear Value On Refresh Options` to ensure any set value on the Model field is cleared when a new Make value is selected.

<figure><img src="https://2053155777-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdE1To8ypyE1yhXEJ7QlD%2Fuploads%2F3Pl6uhOvXxIVvJNuAOGK%2Frefreshoptions.jpg?alt=media&#x26;token=45e9dee7-8ec9-4d47-8dca-d07680a9e731" alt=""><figcaption></figcaption></figure>

### Testing The Form

With these changes in place, `Use` the Vehicle Registration form and select a Make value. The values within the Model field should reflect Models associated with that Make. Changing the Make field should clear the selected Model value and refresh the options to the new Make Models.&#x20;

{% embed url="<https://codepen.io/JeriahFormio/pen/rNQaGJG>" %}