我正在尝试使用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"}]
首先,您准备就绪的文档看起来有些不对,应该为$(document).ready(function(){});或可能为just $(function(){});。
$(document).ready(function(){});
$(function(){});
其次,循环遍历JSON结果看起来也有些奇怪。尝试这样的事情:
$.each(data.subjects, function(i, val){ $('select#item_2').append('<option value="' + val.id + '">' + val.name + '</option>'); });