Question

此项目的目标是让用户选择“颜色”，第二个下拉列表仅显示该颜色组中的成员。我已经发布了我的SQL表以及我的php页面和我的网页。

我遇到的问题是我无法让我的会员下拉列表工作。它没有接纳任何成员。

SQL：

+--------+
| Color  |
+--------+
| Red    |
| Blue   |
| Orange |
| Black  |
+--------+

+--------+--------------+
| Color  | MemberName   |
+--------+--------------+
| Red    | Joe Bob      |
| Red    | Catherine    |
| Blue   | Tommy        |
| Orange | John Razks   |
| Black  | Trevor Smith |
+--------+--------------+

我的PHP代码：

<!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);
			}
		});
	});
});
</script>

Fetch.PHP

<html>
<body>
<?php
	$conn=mysqli_connect("#connection");
	if(!$conn){ die("Connection Failed".mysqli_connect_error()); }
	else{
	$output='';
	$sql = "SELECT MemberName from Members where Color = '".$_POST["color"]."' ORDER BY MemberName ASC";
	$result = mysqli_query($conn, $sql);
	$output = '<option value="">Select the Individual</option>';
	while ($row=mysqli_fetch_array($result))
	{
		$output .='<option value="'.$row["MemberName"].'">'.$row["MemberName"].'</option>';
	}
	}
	
	
	echo $output;
	?>
</body>
</html>

Answer 1

你必须 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>

在 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);
?>

使用JQuery和Ajax的动态依赖选择

1 个答案: