Как скрыть некоторые option у тега select на чистом JS

Сначала нужно вытащить все элементы, связанные с этим select'ом - document.getElementById()

Дальше - вытащить все элементы option внутри этого select'a - document.getElementsByTagName().

Теперь у нас есть список (массив) элементов, над которыми нужно произвести какие-либо действия. Собственно строка let optionList = document.getElementById('vid').getElementsByTagName('option'); получает все элементы.

Дальше в цикле просто проставляем им style="display:none;"

<script>
    let optionList = document.getElementById('vid').getElementsByTagName('option');
    for (i = 0; i < optionList.length; i++) {
        if (i > 2) {
            optionList[i].setAttribute('style', 'display:none;')
        }
    }
</script>

Хоть в вопросу и написано про js, я считаю это перебор.

Предлагаю все таки делать это через css:

#vid option:nth-child(n+4) { 
  display: none; 
}

<select id="vid" name="vid[]"> 
    <option value="1">Мелкая собака</option> 
    <option value="2">Средняя собака</option> 
    <option value="3">Крупная собака</option> 
    <option value="4">Кошка</option> 
    <option value="6">Мелкий грызун</option> 
</select>

PS: если надо оставить каких-то конкретных животных тогда уже лучше использовать js (определять по содержимому)

var option = document.querySelectorAll('option');
  for (let i = 0; i < option.length; i++) {
    if (i > 2) {
      option[i].style.display = 'none';
    }
  }