javascript populate a dropdown list from an array

I have a dependent dropdown list which is created from an array. The menus are fine but I would like to add an alteration.

If there are no options available on the second menu, rather than be blank, I would like to say ‘no options available’

Here’s where I filter the array data:

function mediaMenu(arrayOfArrays){
    arrayOfValues = arrayOfArrays.filter(function(r){return true;});
    // console.log(arrayOfValues);
    var servicesOffered = document.getElementById("services").value;
    var mediaType = document.getElementById("media-type");
    var filteredArrayOfValues = arrayOfValues.filter(r => r[5].includes(servicesOffered));
    showFilteredDropdownMenuOptions(mediaType, filteredArrayOfValues, 0);
  }

This is the line that filters the info.

var filteredArrayOfValues = arrayOfValues.filter(r => r[5].includes(servicesOffered));

If make a selection on the first menu that does includes certain text i.e. Banner, I get this response.

If I make a section and there is no match i.e Business Stationery, I get this:

I can’t figure out how to do my IF statement.

Here’s my attempt:

function mediaMenu(arrayOfArrays){
    arrayOfValues = arrayOfArrays.filter(function(r){return true;});
    var servicesOffered = document.getElementById("services").value;
    var mediaType = document.getElementById("media-type");
    var filteredArrayOfValues = arrayOfValues.filter(r => r[5].includes(servicesOffered));
    console.log(filteredArrayOfValues);
    if(filteredArrayOfValues === []) {
      alert('No match');
      noMatchDropdownMenuOptions(mediaType, filteredArrayOfValues, 0);
    } else {
      alert('match');
      showFilteredDropdownMenuOptions(mediaType, filteredArrayOfValues, 0);
    }
  }

function noMatchDropdownMenuOptions(el, arrayOfArrays, index) {
    el.innerHTML = '';
    var option = document.createElement("option");
    option.value = "";
    option.textContent = 'No Match';
    el.appendChild(option);
  }

function showFilteredDropdownMenuOptions(el, arrayOfArrays, index) {
    var currentlyAdded = []
    el.innerHTML = '';
    var option = document.createElement("option");
    option.value = "";
    // option.attr('disabled hidden');
    option.textContent = 'Please Select';
    el.appendChild(option);
    arrayOfArrays.forEach(function(r){
      if(currentlyAdded.indexOf(r[index]) ===-1) {
        var option = document.createElement("option");
        option.textContent = r[index];
        el.appendChild(option);
        currentlyAdded.push(r[index]);
      }
    });
  }

I get ‘match’ no matter what I select.

I also need to create an attribute ‘disabled hidden’ to the No Match option so it can’t be selected. I’ve tried this:

option.attr('disabled hidden');

The script fails with the error option.attr is not a function, I thought you could use attr?