使用 ajax jquery php mysql 创建动态下拉列表

Question

我正在创建一个简单的动态下拉列表，第二个的填充基于第一个的选择，但问题是第一个下拉列表不填充任何内容，所以我不能使用第二个 谁能帮帮我？？

dbconfig.php

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

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#type").attr("disabled","disabled");
            $("select#category").change(function(){
            $("select#type").attr("disabled","disabled");
            $("select#type").html("<option>wait...</option>");
            var id = $("select#category option:selected").attr('value');
            $.post("select_type.php", {id:id}, function(data){
                $("select#type").removeAttr("disabled");
                $("select#type").html(data);
            });
        });
        $("form#select_form").submit(function(){
            var cat = $("select#category option:selected").attr('value');
            var type = $("select#type option:selected").attr('value');
            if(cat>0 && type>0)
            {
                var result = $("select#type 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 category:<br />
            <select id="category">
            <?php echo $opt->ShowCategory(); ?>
            </select>
            <br /><br />

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

选择_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 ShowCategory()
    {
            $sql = "SELECT * FROM category";
            $res = mysql_query($sql,$this->conn);
            $category = '<option value="0">choose...</option>';
            while($row = mysql_fetch_array($res))
            {
                $category .= '<option value="' . $row['id_cat'] . '">' . $row['name'] . '</option>';
            }
            return $category;

    }
    public function ShowType()
   {
    $sql = "SELECT * FROM type WHERE id_cat=$_POST[id]";
    $res = mysql_query($sql,$this->conn);
    $type = '<option value="0">choose...</option>';
       while($row = mysql_fetch_array($res))
      {
        $type .= '<option value="' . $row['id_type'] . '">' . $row['name'] . '</option>';
      }
    return $type;
   }

}   
$opt = new SelectList();   

?>

select_type.php

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

表结构

CREATE TABLE IF NOT EXISTS `categories` (
  `id_cat` int(4) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(40) NOT NULL,
  PRIMARY KEY (`id_cat`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

--
-- Dumping data for table `categories`
--

INSERT INTO `categories` (`id_cat`, `name`) VALUES
(1, 'colours'),
(2, 'flowers'),
(3, 'tools');

-- --------------------------------------------------------

--
-- Table structure for table `type`
--

CREATE TABLE IF NOT EXISTS `type` (
  `id_type` int(4) unsigned NOT NULL AUTO_INCREMENT,
  `id_cat` int(4) unsigned NOT NULL,
  `name` varchar(40) NOT NULL,
  PRIMARY KEY (`id_type`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=15 ;

--
-- Dumping data for table `type`
--

INSERT INTO `type` (`id_type`, `id_cat`, `name`) VALUES
(1, 1, 'yellow'),
(2, 1, 'green'),
(3, 1, 'red'),
(4, 1, 'gray'),
(5, 1, 'white'),
(6, 2, 'daisy'),
(7, 2, 'cowslip'),
(8, 2, 'lily'),
(9, 2, 'sunflower'),
(10, 3, 'hammer'),
(11, 3, 'screwdriver'),
(12, 3, 'spatula'),
(13, 3, 'wrench'),
(14, 3, 'clamp');

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Answer 1

您的主要问题是您尝试使用 $opt->ShowCategory() 访问 ShowCategory()

但是您没有创建 SelectList 类的对象。你应该这样做

$opt = new SelectList();