JSFiddle - React, Tailwind, and code Playground

by kneidels

HTML

<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script>
<form action="" class="validate">
<select id="A1" name="A1" class="required" >
    <option value="">Select...</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>
    <br>    <input type="submit" name="go" value="go" />
</form>

JavaScript

$(".validate").validate();

$("#A1").on("change", function(){
   var A1 = $(this).val();
    if (A1=='1') {
        $("#A1").nextAll('select').remove();
        $('<select id="A11" name="A11" class="required" >    <option value="">you selected 1, now select....</option>    <option value="1">11</option>    <option value="2">22</option></select>').insertAfter($(this));
        $(".validate").validate();
    } else if (A1=='2') {
        $("#A1").nextAll('select').remove();
        $('<select id="A22" name="A22" class="required" >    <option value="">you selected 2, now select....</option>    <option value="1">1111</option>    <option value="2">2222</option></select>').insertAfter($(this));
        $(".validate").validate();
    } else {
        $("#A1").nextAll('select').remove();
    }
        
    
    
});