На многих современных порталах есть зависимые списки. Например на автомобильном портале можно в поиске выбрать марку автомобиля и после выбора марки появится выпадающий список с выбором модели автомобиля. Для реализации такого будем использовать следующие технологии — php, mysql, ajax.
В нашем примере будет список стран и при выборе страны будет появляться select с выбором города выбранной страны затем после выбора города будет появляться выбор областного центра.
Дамп базы
-- phpMyAdmin SQL Dump
-- version 2.10.3
-- http://www.phpmyadmin.net
--
-- Хост: localhost
-- Время создания: Дек 13 2009 г., 13:30
-- Версия сервера: 5.0.45
-- Версия PHP: 5.2.4
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
--
-- База данных: `mytest`
--
-- --------------------------------------------------------
--
-- Структура таблицы `area`
--
CREATE TABLE `area` (
`aID` int(11) NOT NULL auto_increment,
`tID` int(11) NOT NULL,
`area` varchar(256) default NULL,
PRIMARYKEY (`aID`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=13 ;
--
-- Дамп данных таблицы `area`
--
INSERT INTO `area` VALUES (1, 1, 'Губыниха');
INSERT INTO `area` VALUES (2, 1, 'Желтые воды');
INSERT INTO `area` VALUES (3, 2, 'Килия');
INSERT INTO `area` VALUES (4, 2, 'Котовск');
INSERT INTO `area` VALUES (5, 3, 'Болтон');
INSERT INTO `area` VALUES (6, 3, 'Батли');
INSERT INTO `area` VALUES (7, 4, 'Перт');
INSERT INTO `area` VALUES (8, 4, 'Гринок');
INSERT INTO `area` VALUES (9, 5, 'Неизвестно');
INSERT INTO `area` VALUES (10, 5, 'Неизвестно');
INSERT INTO `area` VALUES (11, 6, 'Неизвестно');
INSERT INTO `area` VALUES (12, 6, 'Неизвестно');
-- --------------------------------------------------------
--
-- Структура таблицы `country`
--
CREATE TABLE `country` (
`cID` int(11) NOT NULL auto_increment,
`country` varchar(256) default NULL,
PRIMARYKEY (`cID`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=4 ;
--
-- Дамп данных таблицы `country`
--
INSERT INTO `country` VALUES (1, 'Украина');
INSERT INTO `country` VALUES (2, 'Великобритания');
INSERT INTO `country` VALUES (3, 'Индия');
-- --------------------------------------------------------
--
-- Структура таблицы `town`
--
CREATE TABLE `town` (
`tID` int(11) NOT NULL auto_increment,
`cID` int(11) NOT NULL,
`town` varchar(256) default NULL,
PRIMARYKEY (`tID`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=7 ;
--
-- Дамп данных таблицы `town`
--
INSERT INTO `town` VALUES (1, 1, 'Днепропетровст');
INSERT INTO `town` VALUES (2, 1, 'Одесса');
INSERT INTO `town` VALUES (3, 2, 'Англия');
INSERT INTO `town` VALUES (4, 2, 'Шотландия');
INSERT INTO `town` VALUES (5, 3, 'Бомбей');
INSERT INTO `town` VALUES (6, 3, 'Дели');
-- version 2.10.3
-- http://www.phpmyadmin.net
--
-- Хост: localhost
-- Время создания: Дек 13 2009 г., 13:30
-- Версия сервера: 5.0.45
-- Версия PHP: 5.2.4
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
--
-- База данных: `mytest`
--
-- --------------------------------------------------------
--
-- Структура таблицы `area`
--
CREATE TABLE `area` (
`aID` int(11) NOT NULL auto_increment,
`tID` int(11) NOT NULL,
`area` varchar(256) default NULL,
PRIMARY
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=13 ;
--
-- Дамп данных таблицы `area`
--
INSERT INTO `area` VALUES (1, 1, 'Губыниха');
INSERT INTO `area` VALUES (2, 1, 'Желтые воды');
INSERT INTO `area` VALUES (3, 2, 'Килия');
INSERT INTO `area` VALUES (4, 2, 'Котовск');
INSERT INTO `area` VALUES (5, 3, 'Болтон');
INSERT INTO `area` VALUES (6, 3, 'Батли');
INSERT INTO `area` VALUES (7, 4, 'Перт');
INSERT INTO `area` VALUES (8, 4, 'Гринок');
INSERT INTO `area` VALUES (9, 5, 'Неизвестно');
INSERT INTO `area` VALUES (10, 5, 'Неизвестно');
INSERT INTO `area` VALUES (11, 6, 'Неизвестно');
INSERT INTO `area` VALUES (12, 6, 'Неизвестно');
-- --------------------------------------------------------
--
-- Структура таблицы `country`
--
CREATE TABLE `country` (
`cID` int(11) NOT NULL auto_increment,
`country` varchar(256) default NULL,
PRIMARY
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=4 ;
--
-- Дамп данных таблицы `country`
--
INSERT INTO `country` VALUES (1, 'Украина');
INSERT INTO `country` VALUES (2, 'Великобритания');
INSERT INTO `country` VALUES (3, 'Индия');
-- --------------------------------------------------------
--
-- Структура таблицы `town`
--
CREATE TABLE `town` (
`tID` int(11) NOT NULL auto_increment,
`cID` int(11) NOT NULL,
`town` varchar(256) default NULL,
PRIMARY
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=7 ;
--
-- Дамп данных таблицы `town`
--
INSERT INTO `town` VALUES (1, 1, 'Днепропетровст');
INSERT INTO `town` VALUES (2, 1, 'Одесса');
INSERT INTO `town` VALUES (3, 2, 'Англия');
INSERT INTO `town` VALUES (4, 2, 'Шотландия');
INSERT INTO `town` VALUES (5, 3, 'Бомбей');
INSERT INTO `town` VALUES (6, 3, 'Дели');
Следующий шаг создадим страницу вывода списков
файл – select-country.php
<script src="func.js" type="text/javascript"></script>
require_once("dbconnect.php");
?>
<form method="post">$q=mysql_query("SELECT cID, country FROM country");
$i=0;
while($r=mysql_fetch_object($q))
{
if($i == 0)
{
?>
Cтраны
<select id="country" name="country"> <option value="0">-- Выберите страну --</option> <option value="<?=$r-">cID?>>country?></option> </select>
Город:<span id="town"> </span>
Область:<span id="area"> </span>
</form>
require_once("dbconnect.php");
?>
<form method="post">$q=
$i=0;
while($r=
{
if($i == 0)
{
?>
Cтраны
<select id="country" name="country"> <option value="0">-- Выберите страну --</option> <option value="<?=$r-">cID?>>country?></option> </select>
Город:<span id="town"> </span>
Область:<span id="area"> </span>
</form>
javascript формирует выпадающий список для города и вставляет его в спан у которого id – town. Для области таже система только ид другой.
В файле func.js вся логика аджакса.
Файл func.js
// JavaScript Document
var request = null;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = null;
}
}
}
if (request == null)
alert("Error creating request object!");
function getNewTotals(getshop, area) {
var url = "get-data.php";
if(getshop && area)
{
//alert(escape(area));
url = url + "?date=" + new Date().getTime() + "&getshop=" + escape(getshop) + "&area=" + escape(area);
}
else
url = url + "?date=" + new Date().getTime() + "&getshop=" + escape(getshop);
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);
}
function updatePage() {
if (request.readyState == 4) {
if (request.status == 200) {
var xmlDoc = request.responseXML;
//alert(xmlDoc.getElementsByTagName("area")[0].nodeValue);
alert(xmlDoc.getElementsByTagName("step")[0].childNodes[0].nodeValue);
if(xmlDoc.getElementsByTagName("step")[0].childNodes[0].nodeValue == 'area') {
document.getElementById("area").innerHTML = "";
var xmlTown = xmlDoc.getElementsByTagName("option");
//create select element
formselect = document.getElementById("area");
var _select_ = document.createElement("select");
_select_.setAttribute("id", "area1");
formselect.appendChild(_select_);
for (i=0;i
//create options element
formoption = document.getElementById("area1");
var valueop = xmlTown[i].childNodes[0].nodeValue;
var option = document.createElement("option");
var Text = document.createTextNode(valueop);
option.appendChild(Text);
x=xmlDoc.getElementsByTagName("option")[i].attributes;
var xmlAttribut = x.getNamedItem("value").nodeValue;
option.setAttribute("value", xmlAttribut);
formoption.appendChild(option);
}
}
else
{
document.getElementById("town").innerHTML = "";
document.getElementById("area").innerHTML = "";
var xmlTown = xmlDoc.getElementsByTagName("option");
//create select element
formselect = document.getElementById("town");
var _select_ = document.createElement("select");
_select_.setAttribute("id", "town1");
_select_.setAttribute("onchange", "getNewTotals(this.value, area = 'tru');");
formselect.appendChild(_select_);
for (i=0;i
//create options element
formoption = document.getElementById("town1");
var valueop = xmlTown[i].childNodes[0].nodeValue;
var option = document.createElement("option");
var Text = document.createTextNode(valueop);
option.appendChild(Text);
x=xmlDoc.getElementsByTagName("option")[i].attributes;
var xmlAttribut = x.getNamedItem("value").nodeValue;
option.setAttribute("value", xmlAttribut);
formoption.appendChild(option);
}
}//else
}
}
}
var request = null;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = null;
}
}
}
if (request == null)
alert("Error creating request object!");
function getNewTotals(getshop, area) {
var url = "get-data.php";
if(getshop && area)
{
//alert(escape(area));
url = url + "?date=" + new Date().getTime() + "&getshop=" + escape(getshop) + "&area=" + escape(area);
}
else
url = url + "?date=" + new Date().getTime() + "&getshop=" + escape(getshop);
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);
}
function updatePage() {
if (request.readyState == 4) {
if (request.status == 200) {
var xmlDoc = request.responseXML;
//alert(xmlDoc.getElementsByTagName("area")[0].nodeValue);
alert(xmlDoc.getElementsByTagName("step")[0].childNodes[0].nodeValue);
if(xmlDoc.getElementsByTagName("step")[0].childNodes[0].nodeValue == 'area') {
document.getElementById("area").innerHTML = "";
var xmlTown = xmlDoc.getElementsByTagName("option");
//create select element
formselect = document.getElementById("area");
var _select_ = document.createElement("select");
_select_.setAttribute("id", "area1");
formselect.appendChild(_select_);
for (i=0;i
//create options element
formoption = document.getElementById("area1");
var valueop = xmlTown[i].childNodes[0].nodeValue;
var option = document.createElement("option");
var Text = document.createTextNode(valueop);
option.appendChild(Text);
x=xmlDoc.getElementsByTagName("option")[i].attributes;
var xmlAttribut = x.getNamedItem("value").nodeValue;
option.setAttribute("value", xmlAttribut);
formoption.appendChild(option);
}
}
else
{
document.getElementById("town").innerHTML = "";
document.getElementById("area").innerHTML = "";
var xmlTown = xmlDoc.getElementsByTagName("option");
//create select element
formselect = document.getElementById("town");
var _select_ = document.createElement("select");
_select_.setAttribute("id", "town1");
_select_.setAttribute("onchange", "getNewTotals(this.value, area = 'tru');");
formselect.appendChild(_select_);
for (i=0;i
//create options element
formoption = document.getElementById("town1");
var valueop = xmlTown[i].childNodes[0].nodeValue;
var option = document.createElement("option");
var Text = document.createTextNode(valueop);
option.appendChild(Text);
x=xmlDoc.getElementsByTagName("option")[i].attributes;
var xmlAttribut = x.getNamedItem("value").nodeValue;
option.setAttribute("value", xmlAttribut);
formoption.appendChild(option);
}
}//else
}
}
}
И последний файл get-data.php. В этом файле выбираются данные с базы данных. При выборе области ajax посылает get параметер в данный файл со значением “area”.
require_once("dbconnect.php");
//if(!empty($GET['town']))
if(isset($_GET['getshop']) && empty($_GET['area']))
{
$q=mysql_query("SELECT town.town, town.tID, country.country FROM town, country WHERE
town.cID = country.cID AND country.cID = '".$_GET['getshop']."' ") ordie(mysql_error());
}
elseif(isset($_GET['getshop']) && isset($_GET['area']))
{
$q=mysql_query("SELECT area.area, area.aID FROM area, town WHERE
area.tID = town.tID AND area.tID = '".$_GET['getshop']."'") ordie(mysql_error());
}
$i=1;
header("Content-Type: text/xml");
echo "
";
if(isset($_GET['getshop']) && empty($_GET['area']))
{
?>
town
}
elseif(isset($_GET['getshop']) && isset($_GET['area']))
{ ?>
area
echo " -- Выберите --
";
while($r=mysql_fetch_object($q))
{
if(isset($_GET['getshop']) && empty($_GET['area']))
{
?>
town ?>
}
elseif(isset($_GET['getshop']) && isset($_GET['area']))
{ ?>
area ?>
}
}
echo '
';
?>
//if(!empty($GET['town']))
if(
{
$q=
town.cID = country.cID AND country.cID = '".$_GET['getshop']."' ") or
}
elseif(
{
$q=
area.tID = town.tID AND area.tID = '".$_GET['getshop']."'") or
}
$i=1;
echo "
";
if(
{
?>
town
}
elseif(
{ ?>
area
echo " -- Выберите --
";
while($r=
{
if(
{
?>
town ?>
}
elseif(
{ ?>
area ?>
}
}
echo '
';
?>
