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

Question

我将CSS-Tricks 中的plugin 用于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);  
            }
        });
    });
});

Answer 2

假设下面的HTML代码写在page.php中

<div class="result"></div>
<select id="first-choice">
    <option selected value="-1">Please Select</option>
    <option value="beverages">Beverages</option>
    <option value="snacks">Snacks</option>
</select>

<br />

<select id="second-choice">
    <option value="-1">Please Select</option>
</select>

<select id="third-choice">
    <option value="-1">Please Select</option>
</select>

在 page.php 中，您还有以下 javascript 代码：

<script type="text/javascript">


    $(document).ready(function(){

    $("#first-choice").change(function(){


    var first-choice=$.trim($("#first-choice").val());

    if(first-choice==-1){


    $(".result").html('<span>first choice not selected</span>');


    }else{

    $(".result").html('<span>Please wait...</span>');

    $.ajax({

    type:"POST",
    url:"page_1.php",
    data:"first_choice="+first-choice,
    success:function(response){

    $("#second-choice").html(response);

    $(".result").html('');

    },
    error:function(response){


    alert("error occurred");




 }

});

}


});



});



</script>

在 page_1.php 中，您有：

    <?php

    $first_choice = trim($_POST['first_choice']);

     $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'"; **Write it as you need**

$result = mysql_query($query);

echo '    <option selected value="-1">Please Select</option>'; 
while ($row = mysql_fetch_array($result)) {
    echo '<option value="'.$row['id'].'">' . trim(htmlspecialchars_decode($row['dd_val'])) . '</option>';
}

    ?>











    $(document).ready(function(){

$("#second-choice").change(function(){

var first_choice=  $.trim($("#first-choice").val());    
var second-choice= $.trim($("#second-choice").val());

    $(".result").html('<span>Please wait...</span>');

          $.ajax({

    type:"POST",
    url:"page_2.php",
    data:"first_choice="+first-choice+"&second_choice="+second-choice,
    success:function(response){

    $("#third-choice").html(response);

    $(".result").html('');

    },
    error:function(response){


    alert("error occurred");


    }

    });


    });


    });

在page_2.php 你有：

<?php
$second_choice=trim($_POST['second_choice']);

//now do as you did in page_1.php to fetch data from DB and echo them as `options`s


?>

在使用 javascript 时不要忘记使用<script/> 标签。至于使用的php 代码，我复制（未测试）您的代码并进行了修改。

编辑：

在second_choice="+second-choice,之前添加了&