CLASS =“選擇選擇”的相關選擇

Question

我正在嘗試制作一個具有依賴下拉列表的表單，但是問題是當我從選擇1轉到具有“選擇的選擇”類的選擇2時，它不會顯示此下​​拉列表中的數據，但是如果我更改這個類到這個下拉菜單，如果您向我傳遞了必要的數據，我會放“ form-control”。

如何在SELECT 2中使用“選擇選擇”類，以便可以動態讀取數據

選擇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-理想的情況是，我可以在此下拉列表中進行搜索，而不是選擇

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

腳本

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

我嘗試使用此腳本和addClass（）jQuery，但無法正常工作

$(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");
        });
    });
});

我是菜鳥，非常感謝您的幫助

Answer 1

因為您提到了您想要搜索和選擇，所以可以使用select2。 https://select2.org/，然后您可以像這樣更改依賴的下拉數據源

$('#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});
    }

});

這是一個小提琴

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