Dependent filters

There is no dependent filter work in mFilter2, because all data are selected and shown at once. However, it can be imitated with help of a special javascript.

For example, you have 2 tv parameters: brand and model of a car, where model name includes brand name.

Filter output will be like this:

[[!mFilter2?
  &parents=`0`
  &filters=`
    tv|marka,
    tv|model
  `
  &aliases=`
    tv|model==model,
    tv|marka==marka,
  `
  &suggestionsRadio=`
    tv|marka,
    tv|model
  `
  &tplFilter.outer.model=`tpl.mFilter2.filter.select`
  &tplFilter.row.model=`tpl.mFilter2.filter.option`
  &tplFilter.outer.marka=`tpl.mFilter2.filter.select`
  &tplFilter.row.marka=`tpl.mFilter2.filter.option`
]]

We need &suggestionsRadio for normal work of select filters.

Now we write script that will hide car models the name of which does not begin with the chosen brand:

var modelFilter = {
  // Our selectors
  options: {
    marka: '#mse2_tv\\|marka',
    model: '#mse2_tv\\|model',
  },
  // Initializing the function
  initialize: function() {
    $this = this;
    // We get the elements we need and save them as object properties
    this.marka = $(this.options['marka']);
    this.model = $(this.options['model']);

    // We look into parameters of the address line in search of the chosen brand
    var params = mSearch2.Hash.get();
    // If there is no such brand there - we turn off models
    if (params['marka'] == undefined) {
      $this.disableModel();
    }
    // If there is such brand there - we turn on models
    else {
      $this.enableModel();
    }

    // We add an operator for brand change
    this.marka.find('select').on('change', function() {
      // If something is selected, we turn on models
      if ($(this).val() != '') {
        // We switch model to the first point 'Select from the list'
        $this.model.find('option:first').attr('selected', true);
        // Then we activate block
        $this.enableModel();
      }
      // If nothing is selected, we turn off models
      else {
        $this.disableModel();
      }
    })
  },

  // Turning off models function
  disableModel: function() {
    // We look for all fields with an unempty value
    $this.model.find('option[value!=""]').attr('selected', false).attr('disabled', true);
    // Then we hide the whole block
    $this.model.hide();
  },

  // Turning on models function
  enableModel: function() {
    // We get the car brand
    var marka = this.marka.find(':selected').text().replace(/\(.*?\)$/, '').replace(/\s+$/, '');
    var re = new RegExp('^' + marka);
    // Then we go through all models and check their names
    $this.model.find('option').each(function() {
      var $this = $(this);
      // If the name does not fit, model should be turned off
      if (!$this.text().match(re) && $this.prop('value') != '') {
        $this.attr('disabled', true);
        $this.hide();
      }
      // If it does model should be turned on
      else {
        $this.attr('disabled', false);
        $this.show();
      }
    });
    // Then we show the whole block with models
    $this.model.show();
  },
}

// Script begins to work when the document is fully downloaded
$(document).ready(function() {
  // And if on the page there are filters
  if ($('#mse2_mfilter').length > 0) {
    modelFilter.initialize();
  }
});

This script is added to a page separately and does not anyhow prevent standard script mSearch2 from working normally.

That is what you should get as a result (you can click on the GIF):