Question

好的..这里的东西可能很容易修复，但不幸的是不适合我。

我尝试创建的是：

我有2个下拉列表。列表一包含直接来自数据库表的数据。没什么好看的。我只是用SELECT查询等方式将它们拉进来。

第二个列表现在是空的，但我希望下拉列表自动填充与我的第一个下拉列表中所选项目的ID相关的数据。

以下是代码：

带有表单的html页面：

<!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>

这是json页面：

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

?>

这是ajax文件：

$("#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>');
        });
    });
});

我似乎无法让它发挥作用。

所以，如果有人可以帮助我，我真的很感激。

提前致谢!!!

Answer 1

以下是工作示例，请检查。

的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>

这是你的json.php代码：

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

使用下拉列表选择php mysql数据库

1 个答案: