如何根据使用 jQuery/AJAX 和 PHP/MySQL 选择的第一个下拉列表填充第二个下拉列表？

Posted 2023-02-24

【中文标题】如何根据使用 jQuery/AJAX 和 PHP/MySQL 选择的第一个下拉列表填充第二个下拉列表？

【英文标题】：How to populate second dropdown based on selection of first dropdown using jQuery/AJAX and PHP/MySQL?

【发布时间】：2012-02-03 16:19:30

【问题描述】：

我正在尝试使用 jQuery/AJAX 和 php/mysql 创建一组动态的下拉框。当页面根据数据库中的值加载时，将填充第一个下拉框。第二个下拉框应根据第一个下拉框中的选择显示一组值。我知道以前在这里有人问过类似的问题，但我还没有找到与我的场景相匹配的解决方案。

我为第二个下拉列表生成 JSON 编码值列表的查询正在运行，但我在将其填充到实际下拉表单元素中时遇到问题。关于我哪里出错的任何想法。

javascript：

<script>
$().ready(function() 

    $("#item_1").change(function ()    

      var group_id = $(this).val();

       $.ajax(
            type: "POST", 
            url: "../../db/groups.php?item_1_id=" + group_id, 
            dataType: "json",
            success: function(data)
                //Clear options corresponding to earlier option of first dropdown
                $('select#item_2').empty(); 
                $('select#item_2').append('<option value="0">Select Option</option>');
                //Populate options of the second dropdown
                $.each( data.subjects, function()    
                    $('select#item_2').append('<option value="'+$(this).attr('group_id')+'">'+$(this).attr('name')+'</option>');
                );
                $('select#item_2').focus();
            ,
            beforeSend: function()
                $('select#item_2').empty();
                $('select#item_2').append('<option value="0">Loading...</option>');
            ,
            error: function()
                $('select#item_2').attr('disabled', true);
                $('select#item_2').empty();
                $('select#item_2').append('<option value="0">No Options</option>');
            
        )  

    ); 
);

</script>

html：

<label id="item_1_label" for="item_1" class="label">#1:</label>
<select id="item_1" name="item_1" />
    <option value="">Select</option>
    <?php
        $sth = $dbh->query ("SELECT id, name, level 
                             FROM groups
                             WHERE level = '1'
                             GROUP by name
                             ORDER BY name");                                   
        while ($row = $sth->fetch ())  
            echo '<option value="'.$row['id'].'">'.$row['name'].'</option>'."\n";       
        
     ?>
</select>

<label id="item_2_label" for="item_2" class="label">#2:</label>
<select id="item_2" name="item_2" />                        
</select>

PHP：

<?php

require_once('../includes/connect.php');        

$item_1_id = $_GET['item_1_id'];

$dbh = get_org_dbh($org_id);

$return_arr = array();

$sth = $dbh->query ("SELECT id, name, level 
                     FROM groups
                     WHERE level = '2'
                     AND parent = $item_1_id
                     GROUP by name
                     ORDER BY name");   

while ($row = $sth->fetch ())  

    $row_array = array("name" => $row['name'], 
                       "id" => $row['id']); 

    array_push($return_arr,$row_array);     


echo json_encode($return_arr);

?>  

示例 JSON 输出：

["name":"A","id":"0","name":"B","id":"1","name":"C","id":"2"]

【问题讨论】：

您是否遇到任何 JS 错误？

您能否提供一个 JSON 示例？

在更改第一个下拉框后，Firebug 正在为 jQuery 脚本显示“对象未定义，长度 = object.length”。页面加载没有错误。

刚刚编辑的问题包含示例 JSON 输出。

你知道错误发生在哪一行吗？我添加了一些您可以查看的答案。

【参考方案1】：

首先，您的文档就绪看起来有点不对劲，它应该是 $(document).ready(function()); 或者它可能只是 $(function());。

其次，循环遍历 JSON 结果看起来也有点奇怪。试试这样的：

$.each(data.subjects, function(i, val)    
   $('select#item_2').append('<option value="' + val.id + '">' + val.name + '</option>');
);

【讨论】：

进行了您建议的更改，但仍然不行。使用 jQuery 1.7，它说错误在第 632 行。

@Michael 好的，因为我没有你的所有代码，所以我不知道那是哪一行。你能帮我查一下，或者在你的代码示例中突出显示吗？

@Michael 好吧，问题很可能不在 jQuery 文件中，但是当我查看 jQuery 源代码中的那一行时，他们声明了 each 方法。这让我觉得问题出在你的循环上。您如何将 data.subjects 传递到循环中。 JSON 结果是否包含比您在示例代码中显示的更多内容？

@Michael 如果 JSON 结果正是您所显示的，请尝试仅将 data 传递给每个函数，而不是 data.subjects。如果这没有帮助，请在成功回调中执行console.log(data);，并发布正在记录的内容，以便我知道包含哪些数据。