Select Filter

Select path filter is used to show or hide HTML elements depending on their path and user selection.

<select data-grid-control="select-filter">
    <option data-path="">Filter by property type</option>
    <option data-path=".property-type-cottage">Cottage</option>
    <option data-path=".property-type-apartment">Apartment</option>
    <option data-path=".property-type-villa">Villa</option>
</select>

Select data attributes

Data Attribute	Value	Description	Required
data-grid-control	select-filter	This attribute defines the control type.	Required
data-id	any alphanumeric string	This attribute may be used in the deep-link, local storage, or complex filter logic.	Optional

Option elements data attributes

Data Attribute	Value	Description
data-path	any CSS selector	It defines the path to the item that should be sorted.
data-inverted	false (default), true	This attribute inverts the filter.

If the data-value attribute is specified, the filter will look for this text value in the provided data-path. In this case, the following data attributes may be specified:

Data Attribute	Value	Description	Required
data-value	any text	The filter will look for this text in the given data-path	Optional
data-mode	contains startsWith endsWith equal	Filter mode. The default value is "equal".	Optional
data-skip	[^a-zA-Z0-9]+	Defines a regex of characters that should be skipped.	Optional

The selected option should be marked with the selected attribute.