select.options[select.selectedIndex].textContent
— текст выбранной опции.
document.getElementById('material').addEventListener('change', function(){
let isPear = (this.options[this.selectedIndex].textContent == "Груша" );
document.getElementById('prod').style.display = isPear ? "block" : "none";
});
<select id="material">
<option value="0"></option>
<option value="рандом">Яблоко</option>
<option value="рандом" data="10">Груша</option>
</select>
<div id="prod" style="display: none; margin: 10px;">Груша, а вовсе не медведь!</div>
Но если код большой, со временем можно легко забыть, что привязка была к слову "Груша". Поэтому я бы как-то обозначил переключение через класс, чтобы уж точно знать, что происходит.
document.getElementById('material').addEventListener('change', function(){
let isPear = this.options[this.selectedIndex].classList.contains("js-show-prod" );
document.getElementById('prod').style.display = isPear ? "block" : "none";
});
<select id="material">
<option value="0"></option>
<option value="рандом">Яблоко</option>
<option class="js-show-prod" value="рандом" data="10">Груша</option>
</select>
<div id="prod" style="display: none; margin: 10px;">Груша, а вовсе не медведь!</div>