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);  
            }
        });
    });
});

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(){

$（ “＃第二选择”）。变化（函数（）{

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,

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

2 个答案: