JSFiddle - React, Tailwind, and code Playground

HTML

<div class="form-group" style="margin-top: 20px;">
    <label for="inputPassword3" class="col-sm-2 control-label">Phase</label>
    <div class="col-sm-10">
        <select class="form-control" name="phase" id="phase">
                    <option  value="1">Phase #1</option>
                    <option  value="2">Phase #2</option>
                    <option  value="3">Phase #3</option>
        </select>
    </div>
</div>
<div class="form-group" >
    <label for="inputPassword3" class="col-sm-2 control-label">Sous phase</label>
    <div class="col-sm-10">
        <select class="form-control" name="ssphase" id="ssphase">
            <option  value="11" id="11" data-phase="1">Subphase #1-1</option>
            <option  value="12" id="12" data-phase="1">Subphase #1-2</option>
            <option  value="13" id="13" data-phase="1">Subphase #1-3</option>
            <option  value="21" id="21" data-phase="2">Subphase #2-1</option>
            <option  value="22" id="22" data-phase="2">Subphase #2-2</option>
            <option  value="23" id="23" data-phase="2">Subphase #2-3</option>
            <option  value="31" id="31" data-phase="3">Subphase #3-1</option>
            <option  value="32" id="32" data-phase="3">Subphase #3-2</option>
            <option  value="33" id="33" data-phase="3">Subphase #3-3</option>
        </select>
    </div>
</div>

JavaScript

phase.onchange = function () {
    show_sphases (this.value);
}

function show_sphases (phase) {
    var subphases = document.querySelectorAll("[data-phase='" + phase + "']");
    var allSubphases = document.querySelectorAll("#ssphase option");

    for (var i = 0; i <= allSubphases.length; i++ ){
        var item = allSubphases.item(i);
        $(item).hide();
    }

    for (var i = 0; i <= subphases.length; i++ ){
        var item = subphases.item(i);
        $(item).show();
    }
}