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

时间：2013-04-23 07:28:00

标签： php mysql jquery drop-down-menu

我正在创建一个简单的动态下拉列表，第二个的填充是基于第一个的选择，但问题是第一个droplist没有填充任何东西所以我不能使用第二个任何人都可以帮助我吗？

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 */;

1 个答案:

答案 0 :(得分：0)

您的主要问题是您尝试使用$ opt-＆gt; ShowCategory（）

访问ShowCategory（）

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

$opt = new SelectList();