JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1" class="carr"> carrière 1</div>
<div id="div2" class="carr"> carrière 2</div>
<div id="div3" class="carr"> carrière 3</div>
<div id="div4" class="carr"> carrière 4</div>
<div id="div5" class="carr"> carrière 5</div>
<div id="div6" class="carr"> carrière 6</div>
<div id="div7" class="carr"> carrière 7</div>
<div id="div8" class="carr"> carrière 8</div>
<select id="foo">
    <option value="-1">choissiez une carrière</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
</select>

CSS

.carr {display:none;}

JavaScript

document.getElementById('foo').onchange= function(){
 n=this.value;
    for(i=1;i<9;i++){
        document.getElementById('div'+i).style.display=(i==n)?'block':'none';
    }  
}