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

Posted 2023-05-09

【中文标题】如何在此代码中再添加一个动态链接选择框

【英文标题】：How to add one more dynamic chained select box to this code

【发布时间】：2014-03-15 13:23:18

【问题描述】：

我将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>

【问题讨论】：

你的意思是三个选择框一个接一个，改变第一个填满第二个，第二个onchange填满第三个？

@IstiaqueAhmed 是的，这就是我想说的。我在表中创建了一个附加列，我希望第三个框根据我在第一个和第二个框中选择的内容从中提取数据。

@RedGiant : 希望以下链接对您有所帮助.. ***.com/q/8749326/2806972

【参考方案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);  
            
        );
    );
);

【讨论】：

非常感谢。我添加了第三个框并复制了您的方法。它让第三个框做出响应，但无法从 sql 中检索数据。我想看看php文件需要做哪些修改。

请看我更新的 jquery。您可以使用 2 get 数据从数据库中进行选择。 choice 和 second.

【参考方案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,之前添加了&

【讨论】：

我按照你说的做了，但似乎代码没有启动 page_1.php 和 page_2.php。第二个框中没有数据被拉取。

浏览器控制台（即 Firebug 控制台）是否出现错误？