如何根据另一个下拉选项更改下拉选项?从数据库中检索的值

时间:2014-04-28 16:28:11

标签: javascript php jquery ajax drop-down-menu

我正在研究这几天,但找不到最终的解决方案。我经历了类似的SOF问题,但不知道为什么我不能解决这个问题。

我有三个下拉菜单。从名为loan master的表中检索所有值(选项)。

First dropdown -> Loan type (values such as housing,personal,instant are in the table).
Second dropdown -> Loan amount (different amounts have been defined for each type)
Third dropdwon - > Interest Rate (same as second)

当用户从第一个下拉列表中选择一个选项时,相关选项(不是全部)必须加载到第二个和第三个下拉列表中

以下是我尝试过的代码。我首先尝试为前两个下拉菜单做到这一点。

<?php 
require_once "../includes/loan_master.php";

?>

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Basic</title>
    </head>
    <body>
       Loan Type <select id="first" name="loan_master_id" class="textInput"> 
           <!--first dropdwon-->
                        <?php
                        $loans=$loan_master->find_by_sql("SELECT * FROM loan_master");
                        //this will return an array
                         foreach ($loans as $loan) {
                            echo "<option value='$loan->id'>$loan->loan_type</option> ";                           

                        }
                        ?>       

       </select>  

       Loan Amount<select id="update">
           <!--second dropdown-->


       </select>



        <script src="../javascripts/jquery-1.11.0.js"></script> 
        <script>
            $(function() {
                $("#first").change(function() {
                    var x = $("#first").val(); 
               // first dropdown value is stored              
                    fire_ajax(x);
                });

                function fire_ajax() {
                    $.ajax({
                        type: "POST",
                        dataType: "text",//is this data type corect?
                        url: "getter.php", 
//getter.php is this file. All are in the same file
                        success: function(res) {
                            $("#update").html("<option>"+res+"</option>");//options are added to second dropdwon
                        }

                    })
                }



            });


        </script>
    </body>
</html>

<?php
//php code 
if (isset($_POST)) { 
    $x=$_POST; // I feel something is wrong here
    $loans=$loan_master->find_by_sql("SELECT * FROM loan_master WHERE id=".$x);


} 
?>

我真的需要让这段代码起作用。任何建议都非常感谢

点:S 我得到的错误

查询失败:未知列&#39;数组&#39;在&#39; where子句&#39; 上次执行的查询:SELECT * FROM loan_master WHERE id = Array

注意:第68行的C:\ wamp \ www \ loan_mgmt \ admin \ getter.php中的数组到字符串转换

进一步更新

getter.php就是这个文件。 (在HTML之后有一个php块的同一文件)。我已按照你说的改变了代码。

<?php
if (isset($_POST["loan_master_id"])) { 
    $x=$_POST["loan_master_id"]; // I feel something is wrong here
    $loans=$loan_master->find_by_sql("SELECT loan_amount FROM loan_master WHERE id=".$x);    
    foreach ($loans as $$loan) {
        echo "<option value='$loan->id'>$loan->loan_amount</option>";
    }


} 
?>

这是成功的部分

success: function(res) {
                            $("#update").html("<option>"+res+"</option>");//options are added to second dropdwon
                        }

我现在没有收到任何错误。发生的事情是第二次下拉是空的。没有选项显示

1 个答案:

答案 0 :(得分:1)

好吧,你的ajax调用的结果是作为单个响应发回的。然后,您将整个响应放入单个选项标记

 $("#update").html("<option>"+res+"</option>");//options are added to second dropdwon

如果你的ajax调用以与上面的代码相同的方式返回响应

 foreach ($loans as $loan) {
             echo  <option value='$loan->id'>$loan->loan_type</option>";                           

                    }

然后你可以做点像......

document.getElementById('update').innerHTML=res;

修改

至于你的错误,我需要看到getter.php给你一些确切的指示,但基本上它说它找不到你在数据库中寻找的东西。你的ajax调用没有失败,你的数据库查询是。

我的猜测是你忘记将任何参数通过ajax传递给你的getter.php代码。您可以在http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp处查看如何从ajax传递信息。

修改2

您的PHP返回的单个文本字符串看起来像

<option value='id'>bla blah</option><option value='id'>bla blah</option><option value='id'>bla blah</option><option value='id'>bla blah</option>

换句话说,所有选项都是一次性的。然后,您将这些选项放入单个选项标记中。

只需执行...即可查看ajax的结果。

alert(res);

如果它显示的是一串包含选项标签的字符串,则不应将它们放在另一个选项标签中。只是在他们的选择标签,如..

document.getElementById('update').innerHTML=res;

如果字符串为空且alert没有显示任何内容,则表示您的数据库查询未找到任何匹配项并返回空。