JSFiddle - React, Tailwind, and code Playground

by dirtyd77

HTML

<div id="filters">
  <input type="radio" name="filter" value="a"/><label>a</label>
  <input type="radio" name="filter" value="b"/><label>b </label>
  <input type="radio" name="filter" value="c"/><label>c </label>
  <input type="radio" name="filter" value="1"/><label>1 </label>
  <input type="radio" name="filter" value="2"/><label>2 </label>
  <input type="radio" name="filter" value="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 () {
    var arrays = [
        ['a', 'b', 'c'],
        ['1', '2', '3']
    ];
    
  $('#filters input').change(function () {
      var value = $(this).val();
      var activeArr = [];
      var index;
      for(var i = 0; i < arrays.length; i++){
          index = $.inArray(value, arrays[i]);
          if(index > -1){
              activeArr = arrays[i];
              break;
          }
      }
      
      $('#options').empty(); //clear options
      $.each(activeArr, function(i, e){
         $('#options').append('<option value="' + e + '">' + e + '</option>');
      });
      
      $('#options option').eq(index).prop('selected', true);
      
      
  });
});