JSFiddle - React, Tailwind, and code Playground

HTML

<label for="input_title">Phone Type:</label>
 <select name="phone_type" id="select_form" class="input-block-level" onchange="find_select()">
   <option id="blank" value="blank"></option>
   <option id="house" value="1">House Phone</option>
   <option id="nsp" value="2">Normal Cell (Non Smart Phone)</option>
   <option id="feedback" value="3">SmartPhone</option>
 </select>

<div id="div-house" class="select-group">
 House subtype:
 <select name="phone_subtype" id="house_form" class="input-block-level" >
   <option id="blank" value="blank"></option>
   <option id="std" value="Phone Call (Standard Voice)"></option>
   <option id="custo" value="Phone Call (Customized Voice)">Phone Call (Customized Voice)</option>
 </select>
</div>

<div id="div-nsp" class="select-group">
 Nsp subtype:
 <select name="nsp_subtype" id="nsp_form" class="input-block-level" >
   <option id="blank" value="blank"></option>
   <option id="val1" value="Some value">Some value</option>
 </select>    
</div>

<div id="div-feedback" class="select-group">
 Feedback subtype:
 <select name="feedback_subtype" id="feedback_form" class="input-block-level" >
   <option id="blank" value="blank"></option>
   <option id="val2" value="Some value">Some value</option>
 </select>  
</div>

JavaScript

$(document).ready(function () {
    $(".select-group").hide();
});

function find_select()
{
    // Hide all the dynamic divs
    $(".select-group").hide();
    // Clear the selection of all the dropdowns below the "select-group" divs.
    $(".select-group").find('option:selected').removeAttr('selected');
    var select = $("#select_form");
    if (select.val() > 0)
    {
        var idSelected = select.find('option:selected').attr('id');
        // Show the one needed
        $("#div-" + idSelected).show();
    }
}