php ajax droplist

时间:2013-02-28 22:29:01

标签: php mysql ajax drop-down-menu dreamweaver

我正在创建2个下拉列表,第二个下拉列表基于第一个下拉列表的选择。从mysql数据库中检索数据

index.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>Playing With Select list</title>
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,700' rel='stylesheet' type='text/css' />
        <!--[if lte IE 8]><style>.main{display:none;} .support-note .note-ie{display:block;}</style><![endif]-->
    <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 id=$(this).val();
        var dataString = 'id='+ id;

        $.ajax
        ({
        type: "POST",
        url: "ajax_category.php",
        data: dataString,
        cache: false,
        success: function(html)
        {
        $(".governorate").html(html);
        } 
        });

        });
        });
    </script>

    </head>
    <body>
        <div class="container">
            <header>
                <h1><strong>Playing With Select List</strong></h1>
                <h2>Select One List To see Output On Other</h2>
            </header>
        </div>
    <span style="margin-left:22%">
            <label>country :</label> <select name="country" class="category">
<option selected="selected">--Select Country--</option>
<?php
include('db.php');
$sql=mysql_query("select country_id,country_name from country");
while($row=mysql_fetch_array($sql))
{
$id=$row['country_id'];
$data=$row['country_name'];
echo '<option value="'.$id.'">'.$data.'</option>';
 } ?>
</select> &nbsp;&nbsp;&nbsp;
<label>Governorate :</label> <select name="governorate" class="subcategory">
<option selected="selected">--Select governorate--</option>

</select>
</span>
<br><br><br>
                <h1><center><strong>Go To-:<a href="www.tricktodesign.com">TrickToDesign</a></strong></center></h1>
    </body>
</html>

ajax_category.php

<?php
include('db.php');
if($_POST['governorate_id'])
{
$id=$_POST['governorate_id'];
$sql=mysql_query("select b.governorate_id,b.governorate_name from governorate a,contry_id b where b.country_id=a.country_id and parent='$id'");

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

?>

如何使第二个下拉列表中显示数据,这是我面临的错误

1 个答案:

答案 0 :(得分:0)

将$(&#34;。governorate&#34;)。html(html)更改为$(&#34; .subcategory&#34;)。html(html)