Dynamic Dependant Drop-Down Lists

We will show you how to filter a select menu with the value of another select menu. We inserted two empty select menus, on our page. We will bind dynamic data to them. The first one will list the categories and the second one, will display the product in the selected category. First, let's create a server action file. Add a name for it (1). Then, open globals. And right click get (2). Add a variable (3).

We call this variable - category. We will assign to it the category, selected from the categories dropdown. Right click steps (1). And add a database connection (2).

Select your database connection, from the dropdown or create one if you haven't done this yet (1)

then, right click the database connection step (1). And add a database query (2).

Add a name for this query. We call it - categories as it will bring the categories from our database (1). Click the query options button (2). And then select and add your database table (3). Then add the columns,that you need to the select list. and click OK (4)

We are done setting up, our categories query. Now let's add the products query (1). Right click the query, that we've just created and add another database query (2).

We call it products (1). Click the query options button (2). Select the database table, that you want to display data from and add it (3). Then, add the columns you need to the select list (4). Open the filters tab (5)

Select the column, that you want to filter the query by. and add it to the filters list. Then, click the dynamic data button for the filter value. And under globals select the variable, that we created earlier (1). And click the select button (2).

Select the same variable, in the condition field. This way the query will be filtered, only when a filter value is present. Otherwise, it will display all of the records. Click the OK button when you are done.

And save your action file (1). Now, we need to create a server action executor (2). Click the add new button (3). Add a name for this executor. Select to run it on dom ready (4). And then select your action file, from the dropdown. Set the method to get (5). You can see our get variable, which we created earlier, in the server connect globals. We are using it to filter the products query, so it needs to have a value assigned (6). It's value should be the value, selected in the first dropdown. So, we select the category dropdown, under the global FORM variables (7). And then we assign it as a value, for our category variable. (8) then,check the refresh action file on change, checkbox (9) This way, as soon as we select a category, the action file will automatically refresh, and the product query will be filtered. Then click the OK button.

Now, let's add the dynamic data to our dropdowns. Click the first select menu. And select the categories query, in the executor, that we've just created. Select to bind it as data repeat children. And click the bind button.

Now, let's add the dynamic data to our dropdowns (1). Click the first select menu. And select the categories query, in the executor, that we've just created. Select to bind it as And click the bind button repeat children (2). And click the bind button (3).

We use the same binding, for the option title but you can use whatever you need to show as a title. click select, option, title (1). And bind it (2). We do the same with the second dropdown. This time using the products query. Let's preview the results. That's how easy it is to filter dynamic dropdowns, using dmxzone server connect (3)

That's how easy it is to filter dynamic dropdowns, using dmxzone server connect.