dsgnsdjk26586
2016-10-31 14:06
浏览 48

使用下拉列表选择php mysql数据库中的结果创建新的下拉列表

Ok .. here is the thing which is probably very easy to fix but unfortunatly not for me.

What I try to create is this:

I have 2 dropdown lists. List one consist of data straight from a database table. Nothing fancy about that. I am just pulling them in with a SELECT query etc.

The second list is empty for now, but I would like that dropdown list be automatically filled with data that is related through id's by the selected item from my first dropdown list.

Here is the code:

html page with form:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Document</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

    <script src="form.js"></script>
</head>

<body>
             <form action="create_account.php" method="post">
                <ul style="list-style: none;">
                    <li>
                        <label>District:</label>
                        <select name="district" id="district">
                            <option id="0"> -- Selecteer District --</option>
                            <option id="Amsterdam">Amsterdam</option>
                            <option id="Arnhem">Arnhem</option>
                            <option id="Assen">Assen</option>
                            <option id="Groningen">Groningen</option>
                            <option id="Leeuwarden">Leeuwarden</option>
                            <option id="Rotterdam">Rotterdam</option>
                            <option id="Sittard">Sittard</option>
                            <option id="Tilburg">Tilburg</option>
                            <option id="Utrecht">Utrecht</option>
                            <option id="Antillen">Antillen</option>
                        </select>
                    </li>
                    <li>
                        <label>Gemeente:</label>
                        <select name="gemeente" id="gemeente">
                            <option id="0"> -- Selecteer Gemeente --</option>
                        </select>
                    </li>
                </ul>
            </form>
        </div>

</body>
</html>

Here is the json page:

<?php
header('Content-Type: application/json');

$response = array();

if (isset($_GET['districtid'])) 
{
    //vul hier je database gebuikersnaam en ww in
    mysql_connect("localhost", "root", "") or die("Could not connect: " .     mysql_error());
    //vul hier je mysql db naam in
    mysql_select_db("my_db");

    $qry = mysql_real_escape_string("SELECT * FROM gemeente WHERE district_id = " + $_GET['districtid']);

    $result = mysql_query($qry);

    while ($row = mysql_fetch_array($result, MYSQL_NUM)) {
        array_push($response, $row);
    }

    echo json_encode($response);
} else {
    $response[0]['id'] = 0;
    $response[0]['gemeente'] = ' -- Selecteer Gemeente --';
    echo json_encode($response);
}

?>

And here is the ajax file:

$("#district").change(function() {
    $.getJSON("json.php?districtid="+$(this).val(), function(data) {
        $("#gemeente").empty();
        $.each(data, function(){
            $("#gemeente").append('<option value="'+ this.id +'">'+ this.gemeente +'</option>');
        });
    });
});

I can't seem to get it working.

So if there is somebody out there that can help me out, I realy appreciate it.

Thanks in advance !!!

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • douhan1860 2016-11-03 06:57
    已采纳

    Here is the working example, please check.

    index.php

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#district").change(function() {
                $.getJSON("json.php?districtid="+$(this).val(), function(data) {
                    $("#gemeente").empty();
                    $.each(data, function(){
                        $("#gemeente").append('<option value="'+ this.id +'">'+ this.gemeente +'</option>');
                    });
                });
            });
        });
    </script>
    </head>
    <body>
    <form action="create_account.php" method="post">
                <ul style="list-style: none;">
                    <li>
                        <label>District:</label>
                        <select name="district" id="district">
                            <option id="0"> -- Selecteer District --</option>
                            <option id="Amsterdam">Amsterdam</option>
                            <option id="Arnhem">Arnhem</option>
                            <option id="Assen">Assen</option>
                            <option id="Groningen">Groningen</option>
                            <option id="Leeuwarden">Leeuwarden</option>
                            <option id="Rotterdam">Rotterdam</option>
                            <option id="Sittard">Sittard</option>
                            <option id="Tilburg">Tilburg</option>
                            <option id="Utrecht">Utrecht</option>
                            <option id="Antillen">Antillen</option>
                        </select>
                    </li>
                    <li>
                        <label>Gemeente:</label>
                        <select name="gemeente" id="gemeente">
                            <option id="0"> -- Selecteer Gemeente --</option>
                        </select>
                    </li>
                </ul>
      </form>
      </div>
      </body>
      </html>
    

    Here is your json.php code:

    <?php
    header('Content-Type: application/json');
    
    $response = array();
    
    if (isset($_GET['districtid'])){
    //vul hier je database gebuikersnaam en ww in
    $con=mysqli_connect("localhost","root","","my_db");
    // Check connection
    if (mysqli_connect_errno()){
        echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }
    
    $qry = "SELECT * FROM gemeente WHERE district_id = '".$_GET['districtid']."'";
    
    $result = mysqli_query($con, $qry);  //mysql_query($qry);
    
    while ($row = mysqli_fetch_array($result, MYSQL_BOTH)) {
        array_push($response, $row);
    }
    
    echo json_encode($response);
    } else {
    $response[0]['id'] = 0;
    $response[0]['gemeente'] = ' -- Selecteer Gemeente --';
    echo json_encode($response);
    }
    ?>
    
    已采纳该答案
    打赏 评论

相关推荐 更多相似问题