JSFiddle - React, Tailwind, and code Playground

HTML

<select id="catg" name="catg" style="width: 212px;" onclick='test()'>
<option value="cat1">catégorie 1</option>
<option value="cat2">catégorie 2</option>
<option value="cat3">catégorie 3</option>
</select>

<select id="c1" name="c1" style="display: none">
    <option value="1">sous catégorie 1_1</option>
    <option value="2">sous catégorie 1_2</option>
    <option value="3">sous catégorie 1_3</option>
</select>
<select id="c2" name="c2" style="display: none">
    <option value="1">sous catégorie 2_1</option>
    <option value="2">sous catégorie 2_2</option>
    <option value="3">sous catégorie 2_3</option>
</select>
<select id="c3" name="c3" style="display: none">
    <option value="1">sous catégorie 3_1</option>
    <option value="2">sous catégorie 3_2</option>
    <option value="3">sous catégorie 3_3</option>
</select>
<script>
    function test() {
    if (document.getElementById('catg').value == 'cat1') {
        document.getElementById('c1').style.display = 'block';
    } else {
        document.getElementById('c1').style.display = 'none';
    }
     if (document.getElementById('catg').value == 'cat2') {
        document.getElementById('c2').style.display = 'block';
    } else {
        document.getElementById('c2').style.display = 'none';
    }
     if (document.getElementById('catg').value == 'cat3') {
        document.getElementById('c3').style.display = 'block';
    } else {
        document.getElementById('c3').style.display = 'none';
    }
}    
</script>