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内容 - 可能是一个select标记，因此你需要一个<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调用完成时将下拉菜单切换为“加载”或类似等等。

如何实现这个jQuery代码

1 个答案: