如何实现这个 jQuery 代码 [关闭]

Question

我刚刚获得了一个解决我遇到的问题的方法，但我不确定如何实际实施它。

$(function(){
    $.get('file1.php', function(data){
       $('#dropdown1').html( data ); 
    });

    // on change of dropdown1 populate dropdown2 with the respective data 
    $('#dropdown1').change(function(){
        $.get('file2.php',{ make: $(this).val() }, function(data){
            $(this).html( data ); 
        }); 
    }); 
}); 

这是我问的问题 Ajax form, 2 drop downs with external source
我仍然不确定如何格式化 file1 和 file2.php 以及如何在我的表单中实现它。 我非常感谢您的建议/帮助。谢谢！

Answer 1

换句话说，您想了解一下这个 JavaScript 的作用？

$.get('file1.php', function(data){
    $('#dropdown1').html( data );
}); 

第一个 AJAX 调用将 file1.php 的输出加载到 id 为 dropdown1 的元素中作为 HTML 内容 - 大概这是一个选择标记，因此您需要一个 <option> 元素列表。

$('#dropdown1').change(function(){
    $.get('file2.php',{ make: $(this).val() }, function(data){
        $('#dropdown2').html( data );
    });
});

第二个调用file2.php?make=abc，其中 abc 是在 dropdown1 中选择的值，并将其内容作为 HTML 再次加载到 dropdown2 中。所以大概你想再次输出<option> 元素的列表。

但是有更简洁的方法可以做到这一点，例如返回 JSON 数据列表，然后将它们组合成客户端的选项。特别是，您可以存储最后选择的值，以防用户在列表之间切换，在等待 AJAX 调用完成时将两个下拉菜单切换到“加载”或类似内容，等等。