value

Sets or gets the values of the selected options.

Description

Setting the value property sets the options with those values to be the selected options. The site visitor must set the value property to values that exist in the options list.

To reset the selection tags to have no options selected, set the value property to an empty array, null or undefined.

Getting the value property returns the values of the currently selected options. If no value is selected, the value property returns an empty array.

Type:

Array<string>Read & Write

Related Content:

options

Was this helpful?

Get the value of selection tags

Copy Code

1let myValue = $w("#mySelectionTags").value;  // ["value1", "value2"]

Set the value of selection tags

Copy Code

1$w("#mySelectionTags").value = ["value1", "value2"];

Filter page content using selection tags

This example demonstrates how to filter a dataset based on tags selected by site visitors. If no tags are selected we use an empty filter, which includes all content. If one or more tags are selected, the dataset is filtered to only include items that contain all selected tags. The filtered content is displayed in the repeater or another element connected to the dataset.

Copy Code

1import wixData from 'wix-data';
2
3// ..
4
5export function mySelectionTags_change(event) {
6
7    let selectedTags = $w("#mySelectionTags").value;
8    // Define an empty filter
9    let filter = wixData.filter();
10
11    if (selectedTags) {
12        // Build a filter that only includes items with all selected tags
13        filter = filter.hasAll("tags", selectedTags);
14    }
15
16    $w('#myDataset').setFilter(filter);
17}

Filter page content using selection tags and update the URL

This example demonstrates how to filter a dataset based on selected tags, and then update the page URL to reflect the filtered content. We join the tags using a dash as a separator, and add them to the URL as a query parameter.

Copy Code

1import wixData from 'wix-data';
2import wixLocationFrontend from 'wix-location-frontend';
3
4// ..
5
6export function mySelectionTags_change(event) {
7
8    let selectedTags = $w("#mySelectionTags").value;
9    let filter = wixData.filter();
10
11    if (selectedTags) {
12        let query = selectedTags.join("-");
13        wixLocationFrontend.queryParams.add({ "categories": query });
14        
15        filter = filter.hasAll("tags", selectedTags);
16    } else {
17        wixLocationFrontend.queryParams.remove(["categories"]);
18    }
19
20    $w('#myDataset').setFilter(filter);
21}
22
23// Example URL: https://bookahotel.com/hotels/listings?categories=fridge-pool-gym
24