How to change dropdown options based on another dr

2019-09-01 12:10发布

站内问答 / JavaScript
944 1 5

This question already has an answer here:

I am working on this for few days and could not find a final solution. I went through similar SOF questions, but do not know why cannot I figure this out.

I have three dropdowns. All values (options) are retrieved from a table called 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)

When a user selects one option from the first dropdown ONLY the relevant options (not all) must be loaded into second and third dropdowns

Below is the code that I have attempted. I first try to make it for the first two dropdowns. 

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


} 
?>

I really need make this code to work. Any advice is highly appreciated

P:S Errors that I get

Query failed:Unknown column 'Array' in 'where clause' Last query performed:SELECT * FROM loan_master WHERE id=Array

Notice: Array to string conversion in C:\wamp\www\loan_mgmt\admin\getter.php on line 68

Further updates

getter.php is this file. (same file which has a php block after HTML). I have changed the code as you said. 

<?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>";
    }


} 
?>

This is success part

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

I don't get any errors now. What happens is second dropdown is empty. No options are shown

1条回答
女痞
2楼-- · 2019-09-01 12:50

Well, the result from your ajax call is sent back as single response. You are then putting that whole response into a single option tag 

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

If your ajax call is returning a response in the same manner as your code above

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

                    }

Then you can just do something like...

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

EDIT

As for your error, I'd need to see the getter.php to give you exact instructions, but basically it is saying it can't find what you are looking for in the database. Your ajax call isn't failing, your database query is.

My guess would be you are forgetting to pass any parameters through ajax to your getter.php code. You can see how to pass info from ajax at http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp.

Edit 2

Your PHP is returning a single text string that looks like

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

In other words all the options at once. You are then putting those options into a single option tag.

Check the results of your ajax by just doing...

alert(res);

If it shows you a a string that is a bunch of option tags, you shouldn't put them in another option tag. Just at them to the select tag like..

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

If the string is empty and alert shows you nothing it means your database query didn't find any matches and returned empty.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)