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:
Related Content:
Was this helpful?
1let myValue = $w("#mySelectionTags").value; // ["value1", "value2"]
1$w("#mySelectionTags").value = ["value1", "value2"];
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.
1import wixData from 'wix-data';23// ..45export function mySelectionTags_change(event) {67 let selectedTags = $w("#mySelectionTags").value;8 // Define an empty filter9 let filter = wixData.filter();1011 if (selectedTags) {12 // Build a filter that only includes items with all selected tags13 filter = filter.hasAll("tags", selectedTags);14 }1516 $w('#myDataset').setFilter(filter);17}
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.
1import wixData from 'wix-data';2import wixLocationFrontend from 'wix-location-frontend';34// ..56export function mySelectionTags_change(event) {78 let selectedTags = $w("#mySelectionTags").value;9 let filter = wixData.filter();1011 if (selectedTags) {12 let query = selectedTags.join("-");13 wixLocationFrontend.queryParams.add({ "categories": query });1415 filter = filter.hasAll("tags", selectedTags);16 } else {17 wixLocationFrontend.queryParams.remove(["categories"]);18 }1920 $w('#myDataset').setFilter(filter);21}2223// Example URL: https://bookahotel.com/hotels/listings?categories=fridge-pool-gym24