php - 如何在此代码中添加一个动态链接选择框

Question

我正在使用这个plugin来自CSS-Tricks对于 php/mysql/jquery，使用 PHP、jQuery 和 Mysql 的两个链接选择框。我正在考虑添加一个附加框，其选择取决于第一个和第二个框。我尝试复制和修改 getter.php 处理程序和 JS 代码的后半部分，但当然失败了。第二个和第三个框是否需要一些 IF 语句才能使其工作？

Getter.php:

<?php

$username = "username";
$password = "password";
$hostname = "localhost";

$dbhandle = mysql_connect($hostname, $username, $password) or die("Unable to connect to MySQL");
$selected = mysql_select_db("dropdownvalues", $dbhandle) or die("Could not select examples");
$choice = mysql_real_escape_string($_GET['choice']);

$query = "SELECT * FROM dd_vals WHERE category='$choice'";

$result = mysql_query($query);

while ($row = mysql_fetch_array($result)) {
    echo "<option>" . $row{'dd_val'} . "</option>";
}
?>

代码:

$("#first-choice").change(function() {
    $("#second-choice").load("getter.php?choice=" + $("#first-choice").val());
});

HTML:

<select id="first-choice">
    <option selected value="base">Please Select</option>
    <option value="beverages">Beverages</option>
    <option value="snacks">Snacks</option>
</select>

<br />

<select id="second-choice">
    <option>Please choose from above</option>
</select>

Answer 1

你可以尝试这种方法

$(document).ready(function() {
    $("#first-choice").change(function() {
        var value = $(this).val();
        $.ajax({
            type : "GET",
            url : 'getter.php',
            data : {
                choice : value
            },
            success : function(data){
                $('#second-choice').html(data); 
                $('#third-choice').html('<option>Select second option</option>');   
            }
        })
    });
    $("#second-choice").change(function() {
        var first_value = $("#first-choice").val();
        var value = $(this).val();
        $.ajax({
            type : "GET",
            url : 'getter2.php',
            data : {
                choice : first_value,
                second : value
            },
            success : function(data){
                $('#third-choice').html(data);  
            }
        });
    });
});