如何使用jQuery/AJAX和PHP/MySQL在选择第一个下拉列表的基础上填充第二个下拉列表?
我正在尝试使用jQuery/AJAX和PHP/MySQL创建一组动态下拉框。当页面基于数据库中的值加载时,将填充第一个下拉框。第二个下拉框应根据第一个下拉框中的选择显示一组值。我知道以前在这里也有类似的问题,但我还没有找到与我的场景相匹配的解决方案 我为第二个下拉列表生成JSON编码的值列表的查询正在运行,但在将其填充到实际的下拉表单元素中时遇到了问题。你知道我错在哪里吗 Javascript:如何使用jQuery/AJAX和PHP/MySQL在选择第一个下拉列表的基础上填充第二个下拉列表?,php,jquery,mysql,ajax,drop-down-menu,Php,Jquery,Mysql,Ajax,Drop Down Menu,我正在尝试使用jQuery/AJAX和PHP/MySQL创建一组动态下拉框。当页面基于数据库中的值加载时,将填充第一个下拉框。第二个下拉框应根据第一个下拉框中的选择显示一组值。我知道以前在这里也有类似的问题,但我还没有找到与我的场景相匹配的解决方案 我为第二个下拉列表生成JSON编码的值列表的查询正在运行,但在将其填充到实际的下拉表单元素中时遇到了问题。你知道我错在哪里吗 Javascript: <script> $().ready(function() { $("#ite
<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>
首先,您的documentready看起来有点不对劲,它应该是$document.readyfunction{};或者它可能只是$function{} 其次,在JSON结果上循环看起来也有点奇怪。请尝试以下方法:
$.each(data.subjects, function(i, val){
$('select#item_2').append('<option value="' + val.id + '">' + val.name + '</option>');
});
您是否收到任何JS错误?您是否也可以提供一个JSON示例?Firebug正在显示在更改第一个下拉框后,jQuery脚本的object未定义,length=object.length。页面加载没有错误。只是编辑了问题以包含示例JSON输出。您知道错误发生在哪一行吗?我已经添加了一个答案,其中包含一些您可以查看的内容。进行了您建议的更改,但仍然没有成功。使用jQuery1.7,它说错误在第632行。@Michael好的,因为我没有你所有的代码,我不知道那是哪一行。你能帮我查一下吗,或者在你的代码示例中突出显示它吗?@Michael好吧,问题很可能不在jQuery文件中,但当我查看jQuery源代码中的那一行时,他们在那里声明了each方法。这让我觉得问题出在你身上。你怎么会把数据、主题传递到循环中呢。JSON结果包含的内容是否比您在示例代码中向我展示的内容更多?@Michael如果JSON结果正是您展示的内容,请尝试仅向每个函数传递数据,而不是data.subjects。如果这没有帮助,请执行console.logdata;在成功回调中,发布正在记录的内容,以便我知道包含哪些数据。
<?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);
?>
[{"name":"A","id":"0"},{"name":"B","id":"1"},{"name":"C","id":"2"}]
$.each(data.subjects, function(i, val){
$('select#item_2').append('<option value="' + val.id + '">' + val.name + '</option>');
});