如何用jquery ajax和php做3个相关的组合


how to make 3 related combos with jquery ajax and php

好了,这就是我目前所做的第一页获取数据并填充第一个组合框,这里没有问题。然后用户从combo1中选择一个值,然后(使用ajax)用过滤后的数据创建第二个组合框。这里也行!问题是我需要这个组合。更改属性,它会触发另一个ajax请求来显示最终数据。我的问题是,我不熟悉这足以创建最后的请求…我不明白该怎么做……

这是我在index.php上的代码,在call21.php处理数据后正确加载第二个组合…此时,我没有在call21.php中编写脚本,只有数据库代码来获取所需的值,并将其发送回index.php页面中的div并创建组合框。(与架势= drop2)……

<script type="text/javascript">
$(document).ready(function(){
        $(document).ajaxStart(function(){
        $("#wait").css("display","block");
    });
$(document).ajaxComplete(function(){
    $("#wait").css("display","none");
});
$(".drop1").change(function(){
    var id=$(this).val();
    var dataString = 'user='+ id;
    $.ajax({
        type: "POST",
        url: "call21.php",
        data: dataString,
        cache: false,
        success: function(html){
            $(".tab2").html(html);
            $(".tab1").text(id);
        }});
    });
});
</script>

我的问题是我必须把代码做第二个ajax调用??Index.php还是call21.php??你们能帮我查一下密码吗?

我在这个问题上有超过100小时的谷歌,但我对这个问题的了解太短了,无法自己找到解决方案…

下面是一个基本示例

index . html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo for 3 Ajax Form</title>
    <script src='jquery.min.js'></script>
    <script>
    $(function(){
        $(".select:not(:first)").hide();//Hide All Expect First
        //fill up first
            $.get("index.php?select=1",function(data){
                $("#first").html(data);
            }); //
        //
        $("#first").change(function(){
            $.get("index.php?select=2&value="+$("#first").val(),function(data){
                $("#second").html(data);
            });
            $("#second").show();
        });
        $("#second").change(function(){
            $.get("index.php?select=3&value="+$("#second").val(),function(data){
                $("#third").html(data);
            });
            $("#third").show();
        });
    })
    </script>
</head>
<body>
    <select class="select" id="first"></select>
    <select class="select" id="second"></select>
    <select class="select" id="third"></select>
</body>
</html>

和index . php

<?php 
    $list_for_first = array("a" , "b" , "c");
    $list_for_second = array(array("aa","aa") , array("bb","bb") , array("cc","cc"));
    $list_for_third = array(array("aaa","aaa","aaa") , array("bbb","bbb","bbb") , array("ccc","ccc","ccc"));
    switch ($_GET['select']) {
        case 1:
            foreach ($list_for_first as $key => $value) {
                echo "<option value='$key'>$value</option>";
            }
            break;
        case 2:
            $selected = $_GET['value'];
            foreach ($list_for_second[$selected] as $key => $value) {
                echo "<option value='$key'>$value</option>";
            }
            break;
        case 3:
            $selected = $_GET['value'];
            foreach ($list_for_third[$selected] as $key => $value) {
                echo "<option value='$key'>$value</option>";
            }
            break;
    }
?>

每个select都有3个数组。然后,如果第一次或第二次更改index.php返回'options'选定的选项值。该值显示子数组的索引(在此代码中为$key)。例如,当从第一个中选择"b"时,查询字符串可以像'index.php?selected=2&value=1'。另一方面,当从第二个数组中选择"cc"时,查询字符串应该是'index.php?selected=3&value=2', index.php返回list_for_third数组的第三个子数组。祝你过得愉快。