Php 使用JQuery和Ajax的动态相关选择
该项目的目标是让用户选择“颜色”,第二个下拉列表将只显示该颜色组中的成员。我已经发布了我的SQL表以及我的php页面和url页面 我的问题是我不能让我的会员下拉列表工作。它没有接收任何成员 SQL:Php 使用JQuery和Ajax的动态相关选择,php,jquery,html,mysql,ajax,Php,Jquery,Html,Mysql,Ajax,该项目的目标是让用户选择“颜色”,第二个下拉列表将只显示该颜色组中的成员。我已经发布了我的SQL表以及我的php页面和url页面 我的问题是我不能让我的会员下拉列表工作。它没有接收任何成员 SQL: +--------+ |颜色| +--------+ |红色的| |蓝色的| |橙色的| |黑色的| +--------+ +--------+--------------+ |颜色|成员名称| +--------+--------------+ |红色|乔·鲍勃| |红色|凯瑟琳| |蓝色|汤米
+--------+
|颜色|
+--------+
|红色的|
|蓝色的|
|橙色的|
|黑色的|
+--------+
+--------+--------------+
|颜色|成员名称|
+--------+--------------+
|红色|乔·鲍勃|
|红色|凯瑟琳|
|蓝色|汤米|
|橙色|约翰·拉兹克斯|
|布莱克|特雷弗·史密斯|
+--------+--------------+
您必须对数据进行json编码,然后发送回ajax成功函数
这是你必须做的修改
在php代码和jquery ajax调用中
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<script src="jquery.js"></script>
</head>
<body>
<?php
function load_Color(){
$conn=mysqli_connect("#connection");
if(!$conn){ die("Connection Failed".myslqi_connect_error()); }
else{
$output='';
$sql = "SELECT * from Color order by Color ASC";
$result = mysqli_query($conn, $sql);
while($row=mysqli_fetch_array($result)){
$output .= '<option value="'.$row["Color"].'">'.$row["Color"].'</option>';
}
return $output;
}
}
?>
<div class="formatbody" id="formatbody">
<div class="category_div" id="category_div">Color:
<select id="color" name="color">
<option value="">Select Color</option>
<?php echo load_Color(); ?>
</select>
</div>
<div class="sub_category_div" id="sub_category_div">Individual:
<select name="individual" id="individual">
<option value="">Select Individual</option>
</select>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#color').change(function(){
var Color = $(this).val();
$.ajax({
url: "fetch.php",
method: "POST",
data:{color: Color},
dataType: "text",
success: function(data)
{
$('#individual').html(data.select_option);
}
});
});
});
</script>
测试页
颜色:
选择颜色
个人:
选择个人
$(文档).ready(函数(){
$('#color')。更改(函数(){
var Color=$(this.val();
$.ajax({
url:“fetch.php”,
方法:“张贴”,
数据:{color:color},
数据类型:“文本”,
成功:功能(数据)
{
$('#个人').html(data.select#选项);
}
});
});
});
在fetch.php中
<?php
$conn=mysqli_connect("#connection");
if(!$conn){ die("Connection Failed".mysqli_connect_error()); }
else{
$output=array();
$sql = "SELECT MemberName from Members where Color = '".$_POST["color"]."' ORDER BY MemberName ASC";
$result = mysqli_query($conn, $sql);
$output["select_data"] = '<option value="">Select the Individual</option>';
while ($row=mysqli_fetch_array($result))
{
$output["select_data"] .='<option value="'.$row["MemberName"].'">'.$row["MemberName"].'</option>';
}
}
echo json_encode($output);
?>