<div class="sort-head">
  <select id="select1">
    <option value="">Все методы</option>
    <option value="m1">Метод 1</option>
    <option value="m2">Метод 2</option>
  </select>
  <select id="select2">
    <option value="">Все виды</option>
    <option value="v1">Вид 1</option>
    <option value="v2">Вид 2</option>
    <option value="v3">Вид 3</option>
  </select>
</div>

<div class="sort-content">
  <div class="v1 m1 block">Вид 1 Метода 1</div>
  <div class="v1 m2 block">Вид 1 Метода 2</div>
  <div class="v2 m1 block">Вид 2 Метода 1</div>
  <div class="v2 m2 block">Вид 2 Метода 2</div>
  <div class="v3 m1 block">Вид 3 Метода 1</div>
  <div class="v3 m2 block">Вид 3 Метода 2</div>
</div>

.sort-head {
  display: grid;
  grid-template-columns: 200px 200px;
  margin-bottom: 50px;
}

.sort-content {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  gap: 10px;
}

.sort-content div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 200px;
  background-color: tomato;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
}

.sort-content div.display-none {
  display: none;
}

const select1 = document.querySelector('#select1')
const select2 = document.querySelector('#select2')
const blocks = document.querySelectorAll('.block')

let s1 = ''
let s2 = ''

const filter_blocks = () => {
  [...blocks].forEach(x => {
    const show1 = s1 === '' || x.classList.contains(s1)
    const show2 = s2 === '' || x.classList.contains(s2)
    x.classList.toggle('display-none', !(show1 && show2))
  })
}

select1.addEventListener('change', e => {
  s1 = e.target.value
  filter_blocks()
})

select2.addEventListener('change',  e => {
  s2 = e.target.value
  filter_blocks()
})