使用php mysql ajax jquery填充动态下拉列表

时间:2013-04-25 06:28:13

标签: php mysql jquery

我需要创建三个动态下拉列表,第二个基于第一个和第三个的选择是基于第二个的选择,但我得到一个问题,第二个和第三个显示默认值没有任何选择其他值的选项

谁能帮助我?

dbconfig.php

<?php
$host = "localhost";
$user = "****";
$password = "****";
$db = "lam_el_chamel_db";
?>

select.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
             $(document).ready(function(){
            $("select#district").attr("disabled","disabled");
            $("select#village").attr("disabled","disabled");
            $("select#governorate").change(function(){
            $("select#district").attr("disabled","disabled");
            $("select#district").html("<option>wait...</option>");
            var id = $("select#governorate option:selected").attr('value');
            $.post("select_district.php", {id:id}, function(data){
                $("select#district").removeAttr("disabled");
                $("select#district").html(data);
            });
        });
        $("select#district option:selected").change(function(){
         id = $(this).val(); 
         $.post("select_village.php", {id:id}, function(data){
         $("select#village").attr("disabled","disabled");
         $("select#village").html("<option>wait...</option>");

         $("select#village").removeAttr("disabled");
         $("select#village").html(data);
        });
        $("form#select_form").submit(function(){
            var cat = $("select#governorate option:selected").attr('value');
            var type = $("select#district option:selected").attr('value');
            var vil = $("select#village option:selected").attr('value');
            if(cat>0 && type>0 && vil>0)
            {
                var result = $("select#district option:selected").html();
                $("#result").html('your choice: '+result);
            }
            else
            {
                $("#result").html("you must choose two options!");
            }
            return false;
        });
    });
        </script>
    </head>
    <body>
    <?php include "select.class.php"; ?>
        <form id="select_form">
            Choose a governorate:<br />
            <select id="governorate" name = 'governorate'>

            <?php echo $opt->ShowGovernorate(); ?>


            </select>
            <br /><br />

           choose a district:<br />
            <select id="district">
                <option value="0">choose...</option>
            </select>
            <br /><br />
             choose a village:<br />
            <select id="village">
                <option value="0">choose...</option>
            </select>
            <br /><br />
            <input type="submit" value="confirm" />
        </form>
        <div id="result"></div>
    </body>
</html>

select_class.php

<?php 
 class SelectList
{
    protected $conn;

        public function __construct()

        {
           $this->DbConnect();
        }
    protected function DbConnect()
   {
    include "dbconfig.php";
    $this->conn = mysql_connect($host,$user,$password) OR die("Unable to connect to the database");
    mysql_select_db($db,$this->conn) OR die("can not select the database $db");
    return TRUE;
   }  

    public function ShowGovernorate()
    {
            $sql = "SELECT * FROM governorate";
            $res = mysql_query($sql,$this->conn);
            $governorate = '<option value="0">choose...</option>';
            while($row = mysql_fetch_array($res))
            {
                $governorate .= '<option value="' . $row['governorate_id'] . '">' . $row['governorate_name'] . '</option>';
            }
            return $governorate;

    }
    public function ShowDistrict()
   {
    $sql = "SELECT * FROM districts WHERE governorate_id=$_POST[id]";
    $res = mysql_query($sql,$this->conn);
    var_dump($res);
    $district = '<option value="0">choose...</option>';
       while($row = mysql_fetch_array($res))
      {
        $district .= '<option value="' . $row['district_id'] . '">' . $row['district_name'] . '</option>';
      }
    return $district;
   }

   public function ShowVillage()
   {
    $sql = "SELECT village_id, village_name FROM village WHERE district_id=$_POST[id]";
    $res = mysql_query($sql,$this->conn);
    $village = '<option value="0">choose...</option>';
       while($row = mysql_fetch_array($res))
       {
         $village .='<option value="' .$row['village_id'] . '">' . $row['village_name'] . '</option>';
       }
       return $village;
   }


}   
$opt = new SelectList(); 


?>

select_district.php

<?php
include "select.class.php";
echo $opt->ShowDistrict();
?>

select_village.php

<?php
include "select.class.php";
echo $opt->ShowVillage();
?>

2 个答案:

答案 0 :(得分:0)

 $("select#district option:selected").change(function(){
     id = $(this).val(); 
     $.post("select_village.php", {id:id}, function(data){
     $("select#village").attr("disabled","disabled");
     $("select#village").html("<option>wait...</option>");

     $("select#village").removeAttr("disabled");
     $("select#village").html(data);
    });

尝试

$("select#district").change(function(){ 
id = $(this).val(); 
     $("select#village").attr("disabled","disabled");
     $("select#village").html("<option>wait...</option>");
     $.post("select_village.php", {id:id}, function(data){


     $("select#village").removeAttr("disabled");
     $("select#village").html(data);
    });

答案 1 :(得分:0)

我发现代码中有两个错误,但是已经粘贴了。

  1. 代码中缺少的东西:

        $("select#district option:selected").change(function(){
            id = $(this).val(); 
            $.post("select_village.php", {id:id}, function(data){
                $("select#village").attr("disabled","disabled");
                $("select#village").html("<option>wait...</option>");
    
                $("select#village").removeAttr("disabled");
                $("select#village").html(data);
            }); }); //You have missed this one
    
  2. 在上面的代码中,你添加了一些不太好的东西:

    $(“select#district option:selected”)。change(function(){

  3. 到此:

    $("select#district").change(function(){