基本动态选择列表 PHP 和 AJAX Jquery答案

【问题标题】：basic Dynamic Select list PHP & AJAX Jquery基本动态选择列表 PHP 和 AJAX Jquery
【发布时间】：2015-09-23 12:52:14
【问题描述】：

我试图使用 AJAX 获取动态依赖选择列表，但无法获取第二个列表。这是我的代码。 gethint.php 工作正常。我不知道我在哪里做错了。

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"</script>      

        <script>
        $(document).ready(function()
        {
            $('#brand').change(function()
            {
                var cid=$('#brand').val();
                if(cid !=0)
                {

                $.ajax({
                    type:'post',
                    url: 'gethint.php',
                    data: {id:cid},
                    cache:false,
                    success: function(returndata)
                        {
                            $('#model').html(returndata);
                        }
                    });
                }
            })
        })
        </script>
    </head>
    <body>
        <header>
            <h1>Car Comparision </h1>
        </header>
        <form method="post" action="">
            Brand 1:
            <select id="brand" class="brand">
                    <?php
                    include "connect.php"; 
                    $query=$con->query("SELECT * FROM car");
                    while($brand=$query->fetch_assoc())
                    {
                    $brand_sel='<option value="'.$brand['id'].'"'.">".$brand['brand'].'</option>'."\n";
                    echo $brand_sel;
                    }
                    ?>
            </select>
            Model 1:
            <select id="model" class="model">
            <option value="0">Please select a city</option>
                <option></option>
            </select>
            <input type="submit" value="submit">
        </form>
    </body>
</html>

我的 gethint.php 文件的代码

<?php
require ("connect.php");
$Query='SELECT * FROM model WHERE id='.$_POST['id'];
$sql=$con->query($Query) or die(mysql_error());
//print_r($Query);
while($row=$sql->fetch_array(MYSQLI_ASSOC)) {
    ?>
    <option value="<?php echo $row["id"];?>"><?php echo $row['model_name'];?></option>
<?php
}
?>

【问题讨论】：

识别出任何错误？请确认，ajax 响应是预期的？

标签： javascript php jquery mysql ajax

【解决方案1】：

请试试这个代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script>
    $(document).ready(function()
    {
       $('#brand').on('change', function() {
            var cid=$('#brand').val();
            if(cid !=0)
            {

            $.ajax({
                type:'post',
                url: 'gethint.php',
                data: {id:cid},
                cache:false,
                success: function(returndata)
                    {
                        $('#model').html(returndata);
                    }
                });
            }
        })
    })
    </script>

【讨论】：

它就像一个魅力。谢谢你。但是为什么我的旧代码不起作用。

【解决方案2】：

我会用不同的方式来做：

<?php
require ("connect.php");
$Query='SELECT * FROM model WHERE id='.$_POST['id'];
$sql=$con->query($Query) or die(mysql_error());
//print_r($Query);

$elements = [];
while($row=$sql->fetch_array(MYSQLI_ASSOC)) {
    $item = ["id" => $row['id'], "model_name" => $row['model_name']]
    array_push($elements , $item)

}
echo $elements;

?>

我会发送一个关联数组，其中包含您选择的所有项目。我还将您的脚本修改为：

  <script>
    $(document).ready(function()
    {
        $('#brand').change(function()
        {
            var cid=$('#brand').val();
            if(cid !=0)
            {

            $.ajax({
                type:'post',
                url: 'gethint.php',
                data: {id:cid},
                cache:false,
                success: function(returndata)
                    {
                        returndata.each(data,function(){
                            $('#model').append("<option value="+data.id+">"+data.model_name+"</option>")
                         })

                    }
                });
            }
        })
    })
    </script>

【讨论】：

【解决方案3】：

我真的担心你将正确的值传递给 ajax。

查看第一个select的数据渲染是：

$brand_sel='<option value="'.$brand['id'].'"'.">".$brand['brand'].'</option>'."\n";

应该是这样的：

$brand_sel='<option value="'.$brand['id'].'">'.$brand['brand'].'</option>\n';

根据我上面的评论，如果有任何与 jQuery 或 PHP 相关的错误显示，请告诉我们。

另外，检查传递给 ajax 的数据格式是否正确。

【讨论】：

感谢您指点我。我厌倦了无法工作的代码，所以做了太多的编辑导致所有事情都搞砸了。 BTW Abhishek 的解决方案对我来说效果很好。