JSFiddle - React, Tailwind, and code Playground
HTML
<div id="filters">
<input type="radio" name="filter" value="a" data-filter="["a","b","c"]"/><label>a </label>
<input type="radio" name="filter" value="b" data-filter="["a","b","c"]"/><label>b </label>
<input type="radio" name="filter" value="c" data-filter="["a","b","c"]"/><label>c </label>
<input type="radio" name="filter" value="1" data-filter="["1","2","3"]"/><label>1 </label>
<input type="radio" name="filter" value="2" data-filter="["1","2","3"]"/><label>2 </label>
<input type="radio" name="filter" value="3" data-filter="["1","2","3"]"/><label>3 </label>
</div>
<select id="options">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
JavaScript
$(function () {
$('#filters input').each(function () {
var v = $(this).val();
$(this).click(function () {
$('#options option').filter(function(){
// 1. Make select options hidden or visible based on data-filter
// ?....
// 2. Change select value to use data-value
return $(this).val() == v;
});
});
});
});