DEPENDENT SELECTS WITH CLASS = “chosen-select”

Question

I'm trying to make a form with dependent dropdown, but the problem is when I go from select 1 to select 2 that has the "chosen-select" class, it does not show me the data in this dropdown, but if I change this class to this dropdown and I put "form-control", if you pass me the necessary data.

How can I use the "chosen-select" class in SELECT 2, so that I can read the data dynamically

Select 1

<select id="jornada" class="form-control" name="jornada" required>
            <option value="">-- SELECCIONE --</option>
            <?php 
                    while ($row=mysqli_fetch_array($jornada)) {                     
                    echo '<option value='.$row["id"].'>'.$row["jornada"].'</option>';
                    }
                    mysqli_free_result($jornada)
             ?>            
</select>

Select2 - the ideal is that in this dropdown I can search, instead of selecting

<select id="r_ruta" class="chosen-select" name="r_ruta" required>
    <option value="">-- SELECCIONE --</option>
</select>

Script

$(document).ready(function(){
        $("#jornada").change(function(){
            $.get("get_colegios.php","jornada_id="+$("#jornada").val(), function(data){
                $("#r_ruta").html(data);
                console.log(data);
            });
        });
});

I try whits this script and addClass() jquery, but not work

$(document).ready(function(){
    $("#jornada").change(function(){
        $.get("get_colegios.php","jornada_id="+$("#jornada").val(), function(data){         
            $("#r_ruta").html(data);            
            console.log(data);
            $("#r_ruta").addClass("chosen-select");
        });
    });
});

Im noob in this, very thnks for u help

Answer 1

since you mentioned you would like to search as well as selecting you could use select2. https://select2.org/ then you can change your dependent dropdown data source like this

$('#example').on('select2:select', function (e) {
    var data = e.params.data;
    if (data.text == 'Dogs'){
         $('#dependent').select2('destroy').empty().select2({data: dogs});
    }
    if (data.text == 'Birds'){
         $('#dependent').select2('destroy').empty().select2({data: birds});
    }
    if (data.text == 'Snakes'){
         $('#dependent').select2('destroy').empty().select2({data: snakes});
    }

});

here is a fiddle

https://jsfiddle.net/rLmztr2d/2462/