JSFiddle - React, Tailwind, and code Playground

HTML

<select id="select1">
    <option value="">Select sth</option>
    <option value="1">1st option</option>
    <option value="2">2nd option</option>
    <option value="3">3rd option</option>
</select>

<select id="select2">
    <option value="">Select from select1 first</option>
</select>

JavaScript

$('#select1').change(createSelect2);
$('#select2').change(selectSelect2);

function createSelect2(){
    var option = $(this).find(':selected').val(),
    dataString = "option="+option;
    if(option != '')
    {
        $.ajax({
            type     : 'GET',
            url      : 'http://www.mitilini-trans.gr/demo/test.php',
            data     : dataString,
            dataType : 'JSON',
            cache: false,
            success  : function(data) {          
                var output = '<option value="">Select Sth</option>';            
                $.each(data.data, function(i,s){
                    var newOption = s;
                
                    output += '<option value="' + newOption + '">' + newOption + '</option>';
                });            
                $('#select2').empty().append(output);
            },
            error: function(){
                console.log("Ajax failed");
            }
        });	
    }
    else
    {
        console.log("You have to select at least sth");
    }
}

function selectSelect2(){
    var option = $(this).find(':selected').val();
    if(option != '')
    {
        alert("You selected: "+option);
    }
    else
    {
        alert("You have to select at least sth");
    }
}