JSFiddle - React, Tailwind, and code Playground

HTML

<div class="form-group col-md-4 form-horizontal">
          <label for="service-type">Service Type</label>
          <select id="service-type" class="form-control">
          </select>
         
        </div>
<div class="form-group col-md-4 form-horizontal">
          <label for="media-type">Media Type</label>
          <select id="media-type" class="form-control">
          </select>
         
        </div>

JavaScript

var serviceArray;
const services = [ [ 'Banners' ],
  [ 'Business Stationery' ],
  [ 'Vehicle Graphics' ],
  [ 'Vehicle Magnets' ],
  [ 'Window Graphics' ] ];

const media = [ 
	[ 'Polymeric',
    'Vehicle Graphics (Basic)' ],
  [ 'Monomeric',
    'Labels (Interior)' ],
  [ 'Magnetic (Vehicle Grade)',
    'Magnets (Vehicle Grade)' ],
  [ 'Cast',
    'Vehicle Graphics (Part Wrap), Vehicle Graphics (Full Wrap)' ],
  [ 'Polymeric',
    'Vehicle' ],
  [ 'Polymeric',
    'Vehicle' ],
  [ 'Polymeric',
    'Vehicle Graphics (Part Wrap)' ],
  [ 'Banner (440gsm)',
    'Banners (440gsm)' ],
  [ 'Banner (550gsm)',
    'Banners (550gsm)' ],
  [ 'Banner (510gsm)',
    'Window Graphics (Reverse), Vehicle Graphic (Basic)' ],
  [ 'Banner Mesh (270gsm)',
    'Vehicle Magnets' ],
  [ '345345 (Coloured)',
    'Business Stationery (Premium)' ], ];

menu1()
menu2()


function menu1() {
 var el = document.getElementById("service-type")
 var currentlyAdded = [];
 el.innerHTML = "";
 services.forEach(function(r) {
 if(currentlyAdded.indexOf(r[0]) === -1) {
 var option = document.createElement('option');
  option.text = r[0];
  el.appendChild(option);
  currentlyAdded.push(r[0]);
  }
 })

}

function menu2() {
var serviceValue = document.getElementById("service-type").value;
 var el = document.getElementById("media-type");
 var newArray = media.filter(function(r) {return r[1].includes(serviceValue)})
 var currentlyAdded = [];
 el.innerHTML = "";
 newArray.forEach(function(r) {
 if(currentlyAdded.indexOf(r[1]) === -1) {
 var option = document.createElement('option');
  option.text = r[1];
  el.appendChild(option);
  currentlyAdded.push(r[1]);
  }
 })

}

var a = document.getElementById('service-type');
a.addEventListener('change', function() {
  menu2();
}, false);