Selectbox - Option Seçimi Sorunu

Merhaba, Yapmak istediğim şey, selectbox'ta one class'ına sahip option seçilmiş ise bir div göstermek.

Bu şekilde selectbox döngüm mevcut,

     $terms = get_terms("hero",'order_by=count&hide_empty=0');
 if ( !empty( $terms ) && !is_wp_error( $terms ) ){
     echo '<select id="keax">';
     echo "<option selected='selected'> Seçim Yapın </option>";
     foreach ( $terms as $term ) {
     echo "<option class=". $term->slug ." value='".$term->term_id."'>" . $term->name . "</option>";
     }
     echo "</select>";
    }

Js kodum bu şekilde,

    const select = document.querySelector('#keax');
    select.addEventListener('change',function(event){
        if(select.options[select.selectedIndex].className == 'one'){
            document.querySelector('#example').style.display = 'block';
        }else{
            document.querySelector('#example').style.display = 'none';
        }
    })

Sorun tam olarak şu, foreach döngüsüne girdiği zaman one classs'ına sahip option seçilmiş olsa bile divi göstermiyor. Php kodun html çıktısını kullandığım zaman sorunsuz çalışıyor.

yazdiginiz js kodunu cagirirken ya da tanimlarken body taglarinin en altina tanimlayip dener misiniz bi hocam

Düzeldi hocam Teşekkürler.

Rica ederim hocam eventler dinlenirken live olarak yapilmiyorsa php kodlari sonradan calisacagi icin undefined olarak tanimlayabiliyor class yapisini.. javascript kodlarinizda eger event olaylari olacaksa her zaman en sagliklisi body taglarinin en altina yazmaktir DOM acisindan sorun yasamamak icin