Selecting an air filter: dependent html selects

Our customer, Combifit, sells glazing products with Magento. They asked for a product page that allows a user to select a single air filter (in Dutch: “rooster”) from a selection of thousands. On this page we find a series of select boxes that represent the options of these air filters: their type, glasgoot, epc, isolatorpositie, hendel, bediening, etc. (I thought I better use their Dutch terms than poorly translated English ones). Some of these options have a dependency on other options.

These dependencies are indirect and are based on the features of these options. Different select options may share the same features, since they are part of the same set.

Example rules:

• When the “hendel” is black, the “bediening” needs to be black too.
  Other values from this feature set of colors are white, creme, and gray.
• When the “glasgoot” is size 30, only “eindkappen” of size 30 may be selected.
  Other values from this feature set of glasgoten are 34, 38, and 40.

Selecting an option

When we abstract from this, we find a few sets of features, and a number of select options. Each option has one or more of these features attached. At some point, a user selects one of these options. At that moment we need to disable some other options. Which ones? The options that have values from the same feature set as the selected option, but whose value is different.

An example: the user selects option “Hendel 48 mm zwart”. Attached to this option we find the value “black” of feature set “colors”. Going through the list of all selects, and all of their options, we check which option also has a value from this feature set. The select box “Eindkap” contains the options “Multitop EPC grijs set” and “Multitop EPC zwart set”. Both of these are attached to the feature set of colors. The first one has the feature value of “gray”. It is different from the selected “black” so this option is disabled. The second option has the value of “black”, so this option is enabled.

Javascript code

The feature sets are prepared with PHP and passed to Javascript in the form of a JSON string. The structure looks like this:

There’s an entry for each feature set (‘rooster_glasgoot’, ‘rooster_kleurcode’). this entry contains an array of identifiers for all select/option-values (for example: ‘attribute_rooster_glasgoot/26’) that are attached to this feature value. The Javascript code creates a rewritten version of this array to make it easier to look up all features of a given option.

The Javascript code that updates the enabled / disabled state of all select options goes through 2 phases.

1. First, all options are visited, and their features are collected: selected features
2. Then, all options are revisited. If the option is attached to a feature set from the selected features, but the feature value is different from the selected feature value, the option is disabled. All other options are enabled.

I hope this was interesting to you in any way 🙂