使用ajax jquery php mysql创建动态droplist

Question

i am creating a simple dynamic drop list that the populate of the second one is based on the selection of the first one but the problem is that the first droplist do not populate anything so i can not use the second one can anyone help me ?? 我正在创建一个简单的动态下拉列表，第二个下拉列表的填充基于第一个下拉列表的选择，但问题是第一个下拉列表没有填充任何内容，因此我无法使用第二个下拉列表，有人可以帮助我吗？

dbconfig.php dbconfig.php

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

select.php 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>

select _class.php 选择_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 select_type.php

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

table structure 表结构

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

Your main problem is you are trying to access ShowCategory() using $opt->ShowCategory() 您的主要问题是您尝试使用$ opt-> ShowCategory（）访问ShowCategory（）

But you are not creating object of the class SelectList. 但是，您不是在创建类SelectList的对象。 You should do this 你应该做这个

$opt = new SelectList();

使用ajax jquery php mysql创建动态droplist

问题描述

dbconfig.php dbconfig.php

select.php select.php

select _class.php 选择_class.php

select_type.php select_type.php

table structure 表结构

1 个解决方案

解决方案1
0 2013-04-23 07:34:32

使用ajax jquery php mysql创建动态droplist

问题描述

dbconfig.php dbconfig.php

select.php select.php

select _class.php 选择_class.php

select_type.php select_type.php

table structure 表结构

1 个解决方案

解决方案1 0 2013-04-23 07:34:32

解决方案1
0 2013-04-23 07:34:32