Filter one multiselect based on another multiselect

If you'd like to have two multiselect components with the same values in each component, but if the value is selected in one, it shouldn’t be able to be selected in the other, then this is the post for you! The more complex solution (two related multiselects inside of a listview) is linked here.

  1. Create your query that will populate the multiselect components. Your multiselects' data could also come from any other array.

  1. Create a JS query to check if we should be populating the multiselect with default or filtered data.

const first_arr = multiselect2.value.length ? getActors.data.first_name.filter(x => !multiselect2.value.includes(x)) : getActors.data.first_name;
const anti_arr = multiselect1.value.length ? getActors.data.first_name.filter(x => !multiselect1.value.includes(x)) : getActors.data.first_name;
return {first: first_arr, anti: anti_arr};
  1. Make sure to trigger this JS query on success of the main query (getActors in this example) to populate the multiselects on page load!

  2. Set the multiselect’s data property to the JS query’s data using the Javascript Data source option. For the first/left/OG/etc. multiselect, key into the ‘first’ object and ‘anti’ for the second. These names are arbitrarily set in the JS query, so feel free to change!

image

  1. From each multiselect component, add an event handler to trigger this JS query on change. This way, we ensure that the data is properly filtering with every new selection or change.

image

See attached JSON of this app below and feel free to import in your own Retool organization (docs on importing here).
multiselect depending on multiselect.json (21.1 KB)

This should be a good jumping-off point, though you may need to make some slight adjustments based on your data source!

credit: @jSims :sparkles:

3 Likes