1

建议后编辑（仍未解决）：

我有 2 个下拉菜单，一个叫 Country，另一个叫 City。当用户从 Country 下拉菜单中选择一个国家时（以下下拉菜单将被称为 DDM 为简洁起见），我希望 City DDM 显示该特定国家的所有城市。

我在以下简单形式的数据库中有一个关系（称为 location ）（带有一些条目）：

id country city
    1  India  New Delhi
    2  India  Hyderabad
    3   USA    San Diego
    4   USA    Palo Alto

这是我写的代码：

<html>
<head>
<title>Admin Page</title>
</head>

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function()
    {
        $(".country").change(function()
        {
            var country=$(this).val();
            var dataString = 'country='+ country;
            alert(dataString);
            $.ajax
            ({
                type: "POST",
                url: "getcity.php",
                data: dataString,
                dataType : html,
                cache: false,
                success: function(data, textStatus)
                {
                    alert(textStatus);
                    $(".city").html(data);
                } 
            });

        });
    });
</script>

<body>

<br />
<legend><h2>Welcome Admin!</h2></legend>


<?php
include('db.php');

$sql="SELECT distinct country FROM location"; 
$result=mysqli_query($con, $sql); 

if (!$result)
{
    echo "DB Error, could not list tables\n";
    echo 'MySQL Error: ' . mysql_error();
    exit;
}

echo '<h4>Location :</h4>';
echo '<select name="loaction" class="location">';
echo '<option value="foo">'.'Choose Country'.'</option>';
while ($row=mysqli_fetch_array($result))
{
    echo '<option value='.$row[country].'>'.$row[country].'</option>';
}
echo '</select>';

?>

<h4><label>City :</label> </h4>
<select name = 'city' class = 'city'>
    <option value = 'foo' > Choose City </option>
</select>

我希望您不厌其烦地向下滚动并查看上面的代码。文件 getcity.php 如下：

<?php
include('db.php');

if($_POST['country'])
{
    $country=$_POST['country'];
    $sql=mysql_query("select id, city from location where country='$country'");

    while($row=mysql_fetch_array($sql))
    {
        $id=$row['id'];
        $city=$row['city'];
        echo '<option value="'.$id.'">'.$city.'</option>';
    }
}

但是，即使在从 AJAX 调用返回的状态（通过 alert() 看到）为“成功”之后，我在 City DDM 中也看不到任何内容。

我错过了什么？

再次感谢。

4

4 回答 4

0

您将不得不使用 AJAX 来设置数据库中的选项

在您的视图文件中：

<script>
$(document).ready(function(){
    $("#yourCountryDropDownID").live("change", function(){
        var country = $(this).val();
        $.ajax({
            type: "GET",
            url: "yourSiteUrl/getCities.php/?country="+country,
            success: function(data){
               $("#city_div").html(data);
            }
        });
    });
})
</script>

你的城市下拉列表应该在一个带有 id 的 div 中city_div。现在制作一个 PHP 文件getCities.php并将下面的代码放入其中。

if(isset($_GET["country"]) && !empty($_GET["country"])){
    //Your Code
    //to get cities from country id
    // will come here
}

不要忘记在您的视图中导入 jQuery。

于 2013-05-14T06:07:37.220 回答
0

您肯定需要使用 JavaScript。
我建议使用 jQuery，这样您就可以处理国家列表中的事件更改，并使其向服务器发送ajax调用并将结果作为 json 对象获取，例如：

{
  'country':{
     'id' :10,
     'name' 'France',
     ...
     'cities':{
        '1':'lille',
        '2':'paris'
        ...

     }
  }
}

使用json-encode将结果编码为 php 中的 json 对象，并使用.html更改第二个列表中的城市。

$(".cities_list").html("<option name='1'>lille</option><option name='2'>france</option> ...");

这是一个例子

于 2013-05-14T05:55:05.743 回答
0

这是我的做法：

你需要两个选择器：

<select name="state" class="stateSelector" ></select>
<select name="city" class="citySelector" ></select>

还有一个 jQuery ajax (get) 调用，每次 stateSelector 类的选择器更改时都会触发：

$('.stateSelector').change(function(){
    $.getJSON("http://site.com/getCities/"+$(this).val()+"/all",{}, function(j){
        var options = '<option value="0">- CITY -</option>';
        for (var i = 0; i < j.length; i++) {
            options += '<option value="' + j[i].id + '">' + j[i].name + '</option>';
        }
        $('.citySelector').html(options);
        $('.citySelector').prop("selectedIndex", 0);
    });
});

在服务器端，您需要调用一个 url ( http://site.com/getCities/ {stateId})，它将接收状态 ID 并返回一个包含该特定状态的所有城市的 JSON 集合，在本例中为 JSON结构有 id (j[i].id) 和 name (j[i].name)。

于 2013-05-14T05:55:32.040 回答
0

这是您的代码的工作版本：

<html>
<head>
<title>Admin Page</title>
</head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function()
    {
        $('.country').change(function(){
            $.get("http://172.17.0.2/getcity.php?country="+$(this).val(),{}, function(data){
                $('.city').html(data);
                $('.city').prop("selectedIndex", 0);
            });
        });         
    });
</script>

<body>

<br />
<legend><h2>Welcome Admin!</h2></legend>


<?php

$rows = array( 
                array('country' => 'India'), 
                array('country' => 'Brazil')
            );

echo '<h4>Location :</h4>';
echo '<select name="country" class="country">';
foreach ($rows as  $row)
{
    echo '<option value='.$row['country'].'>'.$row['country'].'</option>';
}
echo '</select>';

?>

<h4><label>City :</label> </h4>
<select name = 'city' class = 'city'>
    <option value = 'foo' > Choose City </option>
</select>

这是 ajax 将调用的脚本 (getcity.php)：

<?php
include('db.php');

if($_GET['country'])
{
        $rows = array( 
                array('country' => 'India', 'city' => 'Nova Delhi'), 
                array('country' => 'Brazil', 'city' => 'Rio de Janeiro')
            );

    foreach($rows as $row)
    {
        if($row['country'] == $_GET['country']) {
            echo '<option value="'.$row['city'].'">'.$row['city'].'</option>';
        }
    }
}

在您的浏览器中对此脚本进行测试：

http://172.17.0.2/cityAjax.php?country=Brazil

在 Chrome 中你可以这样做

view-source:http://172.17.0.2/getcity.php?country=Brazil

此调用的源代码应为：

<option value="Rio de Janeiro">Rio de Janeiro</option>

而且，当然，您必须编辑主机 IP 地址 172.17.0.2。:)

于 2013-05-14T15:29:53.980 回答