Mysql 第二个下拉列表基于第一个下拉列表所选项目填充

我想在html中创建2

第一个选择是静态的

---

第二个选择是动态的，应该根据第一个选择从MySQL数据库填充。

一种方法是使用jquery处理下拉更改事件，并在该事件上进行ajax调用，以获得先前选择的下拉选项

例：

HTML:

---

您可以使用AJAX来实现这一点。 我提交一个例子，你可以相应地改变

    <div>
    <select id="c_source" name="source">
        <option value="option1">option1</option>
        <option value="option2">option2</option>
    </select>
    </div>
    <div>
        <select required id="c_destination" name="city">
        </select>                     
    </div>

AJAX调用

<script>
        var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};

        $("#c_source").change(function(){

         $.ajax({
            type: "GET",
            url: $SCRIPT_ROOT + "/getdest/"+$("#c_source").val(),  //Here you can call any api or backend link where you provide the connection for the details where they can be extracted
            contentType: "application/xml; charset=utf-8",
            success: function(data) {
                $('#c_destination').empty();
                var jsonObj = JSON.parse(data);
                $.each(jsonObj['result'], function(key, value) {
                    $('#c_destination').append($('<option></option>').attr('value', value).text(value));
                });
                },
            error: function(jqXHR, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });

     });
</script>

---

非常广泛，你能给我举个例子吗。谢谢。假设我有get_date.php，如何填充第二个select？假设我有get_data.php。。。我应该把它放在哪里？在url中粘贴该文件的链接。所以，当文件在服务器上运行时，它将能够访问该文件并以json.url='get_data.php'ulr:url格式提供结果

$( document ).ready(function() {
    $('#sel1').change(function(){
    var selectedVal = $(this).val();
    // Make ajax call here and append its out put to second dropdown
  });
});

    <div>
    <select id="c_source" name="source">
        <option value="option1">option1</option>
        <option value="option2">option2</option>
    </select>
    </div>
    <div>
        <select required id="c_destination" name="city">
        </select>                     
    </div>

<script>
        var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};

        $("#c_source").change(function(){

         $.ajax({
            type: "GET",
            url: $SCRIPT_ROOT + "/getdest/"+$("#c_source").val(),  //Here you can call any api or backend link where you provide the connection for the details where they can be extracted
            contentType: "application/xml; charset=utf-8",
            success: function(data) {
                $('#c_destination').empty();
                var jsonObj = JSON.parse(data);
                $.each(jsonObj['result'], function(key, value) {
                    $('#c_destination').append($('<option></option>').attr('value', value).text(value));
                });
                },
            error: function(jqXHR, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });

     });
</script>