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

7
我正在尝试使用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错误吗? - Christofer Eliasson
你能提供一下你的JSON示例吗? - Christofer Eliasson
刚刚编辑了问题,加入了样本JSON输出。 - Michael
你报告的错误在你分享的代码中没有体现。没有调用任何对象的长度属性。我认为问题在你的代码的其他地方。我的问题在这里(http://stackoverflow.com/questions/7704694/how-to-create-chained-eventhandlers-in-jquery-on-repeated-groups-of-elements)提供了一个解决这种情况的解决方案。 - lhagemann
这是另一种到达此网址的方式 - http://www.webdevdoor.com/javascript-ajax/dynamic-select-list-jquery-php/ - user3733831
显示剩余2条评论
1个回答

4

首先,你的文档准备好的代码看起来有点问题,应该是$(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 好的,因为我没有你所有的代码,所以我不知道是哪一行。你能帮我找到它吗?或者在你的代码示例中将其标记出来? - Christofer Eliasson
@Michael,问题很可能不在jQuery文件中,但当我查看jQuery源代码中的那一行时,他们声明了each方法。这让我想到你的循环可能有问题。为什么要将data.subjects传递到循环中?JSON结果是否包含比你在示例代码中展示的更多内容? - Christofer Eliasson
2
@Michael 如果JSON结果就是你展示的那样,那么尝试将data.subjects替换为只传递data到每个函数中。如果这没有帮助,请在成功回调中执行console.log(data);,并发布被记录的内容,以便我知道数据包含什么。 - Christofer Eliasson

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接