如何使用jQuery / AJAX和PHP / MySQL根据第一个下拉列表select第二个下拉列表？
我正在尝试使用jQuery / AJAX和PHP / MySQL创build一组dynamic的下拉框。 当页面基于来自数据库的值加载时，第一个下拉框将被填充。 第二个下拉框应显示一组基于从第一个下拉框中select的值。 我知道在这里曾经有类似的问题，但是我还没有find符合我的情况的解决scheme。
我的查询生成第二个下拉列表的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"}]
首先，你的文档就绪看起来有点偏离，它应该是$(document).ready(function(){}); 或者它可能只是$(function(){}); 。
其次，你循环JSON结果看起来有点奇怪。 尝试这样的事情，而不是：
$.each(data.subjects, function(i, val){ $('select#item_2').append('<option value="' + val.id + '">' + val.name + '</option>'); });
