普通网友 2016-10-31 14:06
浏览 49
已采纳

使用下拉列表选择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);
}
?>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？