Załączam zaktualizowany, w pełni działający kod. Pewnie można go jeszcze zoptymalizować, ale to już raczej dla tych lepiej znających się w temacie.
plik index.php
<?php include_once 'dbconfig.php'; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Dynamic Dependent Select Box using jQuery and PHP</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css" /> <script type="text/javascript" src="jquery-1.4.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { // function to get all records from table function getAll(){ $.ajax ({ url: 'pokaz.php', data: 'action=showAll', cache: false, success: function(r) { $("#display").html(r); } }); } getAll(); // function to get all records from table $(".country").change(function() { var id=$(this).val(); var dataString = 'id='+ id + '&action=country'; $.ajax ({ type: "POST", url: "get_state.php", data: dataString, cache: false, success: function(html) { $(".state").html(html); } }); $.ajax ({ type: "POST", url: "pokaz.php", data: dataString, cache: false, success: function(r) { $("#display").html(r); } }); }); $(".state").change(function() { var id=$(this).val(); var dataString = 'id='+ id + '&action=state'; $.ajax ({ type: "POST", url: "get_city.php", data: dataString, cache: false, success: function(html) { $(".city").html(html); } }); $.ajax ({ type: "POST", url: "pokaz.php", data: dataString, cache: false, success: function(r) { $("#display").html(r); } }); }); $(".city").change(function() { var id=$(this).val(); var dataString = 'id='+ id + '&action=city'; $.ajax ({ type: "POST", url: "get_city.php", data: dataString, cache: false, success: function(html) { $(".city").html(html); } }); $.ajax ({ type: "POST", url: "pokaz.php", data: dataString, cache: false, success: function(r) { $("#display").html(r); } }); }); }); </script> <style> label { font-weight:bold; padding:10px; } div { margin-top:20px; } select { width:150px; height:25px; } </style> </head> <body> <center> <div> <label>Country :</label> <select name="country" class="country"> <option selected="selected">--Państwo--</option> <?php include_once 'get_country.php'; ?> </select> <label>State :</label> <select name="state" class="state"> <option selected="selected">--Stan--</option> </select> <label>City :</label> <select name="city" class="city"> <option selected="selected">--Miasto--</option> </select> </div> <div class="" id="display"> <!-- Records will be displayed here --> </div> </center> </body> </html>
plik pokaz.php
<?php include('dbconfig.php'); $action = $_REQUEST['action']; if ($action=='showAll') { $id = "0"; } else $id=$_POST['id']; if($action=="showAll"){ $stmt=$DB_con->prepare('SELECT * FROM tbl_country'); $stmt->execute(); } elseif($action=="country"){ $stmt = $DB_con->prepare('SELECT * FROM tbl_state WHERE country_id=:id'); } elseif($action=="state"){ $stmt=$DB_con->prepare('SELECT * FROM tbl_city WHERE state_id=:id ORDER BY city_name'); } elseif($action=="city"){ $stmt=$DB_con->prepare('SELECT * FROM tbl_city WHERE city_id=:id ORDER BY city_name'); } else{ $stmt=$DB_con->prepare('SELECT * FROM tbl_country'); $stmt->execute(); } ?> <div class="row"> <?php if($stmt->rowCount() > 0) { while($row=$stmt->fetch(PDO::FETCH_ASSOC)) { ?> <?php if($action=="showAll") { ?> <div class="col-xs-3"> </div> <?php } elseif($action=="country") { ?> <div class="col-xs-3"> </div> <?php } elseif($action=="state") { ?> <div class="col-xs-3"> </div> <?php } elseif($action=="city") { ?> <div class="col-xs-3"> </div> <?php } } } else { ?> <div class="col-xs-3"> </div> <?php } ?> </div>
plik get_coutry.php
<?php $stmt = $DB_con->prepare("SELECT * FROM tbl_country"); $stmt->execute(); while($row=$stmt->fetch(PDO::FETCH_ASSOC)) { ?> <?php } ?>
plik get_state.php
<?php include('dbconfig.php'); if($_POST['id']) { $id=$_POST['id']; $action=$_POST['action']; $stmt = $DB_con->prepare("SELECT * FROM tbl_state WHERE country_id=:id"); ?><option selected="selected">Stan :</option><?php while($row=$stmt->fetch(PDO::FETCH_ASSOC)) { ?> <?php } } ?>
plik get_city.php
<?php include('dbconfig.php'); if($_POST['id']) { $id=$_POST['id']; $action=$_POST['action']; $stmt = $DB_con->prepare("SELECT * FROM tbl_city WHERE state_id=:id"); ?><option selected="selected">Miasto :</option><?php while($row=$stmt->fetch(PDO::FETCH_ASSOC)) { ?> <?php } } ?>
plik dbconfig.php
<?php $DB_host = "localhost"; $DB_user = "root"; $DB_pass = ""; $DB_name = "dbcountries"; try { $DB_con = new PDO("mysql:host={$DB_host};dbname={$DB_name}",$DB_user,$DB_pass); $DB_con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); } catch(PDOException $e) { $e->getMessage(); }
plik dbcountries.sql
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8 */; CREATE TABLE IF NOT EXISTS `tbl_city` ( `city_id` int(3) NOT NULL AUTO_INCREMENT, `state_id` int(3) NOT NULL, `city_name` varchar(35) NOT NULL, PRIMARY KEY (`city_id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=13 ; INSERT INTO `tbl_city` (`city_id`, `state_id`, `city_name`) VALUES (1, 1, 'Surat'), (2, 1, 'Ahmedabad'), (3, 2, 'Pune'), (4, 2, 'Mumbai'), (5, 3, 'royston'), (6, 3, 'bedford'), (7, 4, 'Litherland'), (8, 4, 'ST. helens'), (9, 5, 'Abbeville'), (10, 5, 'Alpine'), (11, 6, 'Angoon'), (12, 6, 'Aniak'); CREATE TABLE IF NOT EXISTS `tbl_country` ( `country_id` int(3) NOT NULL AUTO_INCREMENT, `country_name` varchar(25) NOT NULL, PRIMARY KEY (`country_id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ; INSERT INTO `tbl_country` (`country_id`, `country_name`) VALUES (1, 'India'), (2, 'United kingdom'), (3, 'United States'); CREATE TABLE IF NOT EXISTS `tbl_state` ( `state_id` int(3) NOT NULL AUTO_INCREMENT, `country_id` int(3) NOT NULL, `state_name` varchar(35) NOT NULL, PRIMARY KEY (`state_id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ; INSERT INTO `tbl_state` (`state_id`, `country_id`, `state_name`) VALUES (1, 1, 'Gujarat'), (2, 1, 'Maharashtra'), (3, 2, 'Cambridge'), (4, 2, 'Liverpool'), (5, 3, 'Alabama'), (6, 3, 'Alaska');