Google+ VKontakte Facebook Twitter Odnoklassniki Favorites More

Динамически подгружаемые select-элементы

Опубликовал: Wednesday, November 14, 2024 в категории AJAX, PHP | Пока нет комментариев

На многих сайтах вам наверняка приходилось видеть динамически подгружаемые многоуровневые элементы ввода, когда содержимое нижних динамически меняется в зависимости от выбора в вышестоящем элементе. Например, на сайте www.mail.ru так организован выбор населенного пункта (Регион –> Район –> Город).

В качестве примера, создадим подобный скрипт и мы. Файлы примера располо-

жены на компакт-диске в папке book_primers/2-2. Нам понадобится готовая база населенных пунктов России. Вы думаете, что найти такую базу в Сети нереально? Отчасти это так. Но на сайте Главного научно-исследовательского вычислительного центра Федеральной налоговой службы (www.gnivc.ru) в свободном доступе находится КЛАДР (Классификатор адресов России). Он состоит из таких значений, как индекс, регион (субъект РФ), район, город, населенный пункт, улица, дом. Справочник представлен в формате XLS. Работу по переводу данных для региона

(субъекта РФ), района, города и населенного пункта я уже предварительно провел. Дамп базы данных размером 24 Мбайт находится на компакт-диске в папке book_primers/2-2/kladr_primer2-2.sql

ЗАМЕЧАНИЕ

Возможно при импорте дампа kladr.sql будет выдаваться ошибка. Для ее устранения зайдите в файл php.ini, расположенный в каталоге установки Денвера в папке usr/local/php5, и измените значение параметра upload_max_filesize=8M на большее, например, upload_max_filesize = 30M. Не забудьте перезагрузить Денвер.

Структура таблицы primer_kladr:

id — первичный ключ;

id_region — ID региона;

id_rayon — ID района;

id_town — ID города;

id_punkt — ID населенного пункта;

name — название объекта;

socr — наименование типа (край, область, хутор и пр.);

zindex — почтовый индекс.

Дамп для создания структуры таблицы primer_kladr приведен в листинге 2.8.

Листинг 2.8

CREATE TABLE ‘book_xajax1′.’primer_kladr’ (

‘id’ bigint( 12 ) NOT NULL AUTO_INCREMENT , ‘id_region’ int( 2 ) NOT NULL default ‘0’, ‘id_rayon’ int( 3 ) NOT NULL default ‘0’, ‘id_town’ int( 3 ) NOT NULL default ‘0’, ‘id_punkt’ int( 3 ) NOT NULL default ‘0’,

‘name’ varchar( 100 ) CHARACTER SET cp1251 default NULL , ‘socr’ varchar( 10 ) CHARACTER SET cp1251 default NULL , ‘zindex’ int( 6 ) default NULL ,

UNIQUE KEY ‘id’ ( ‘id’ )

) ENGINE = MYISAM AUTO_INCREMENT = 1 DEFAULT CHARSET = cp1251

Загружаем таблицу primer_kladr в базу данных и приступаем к программированию примера. В файле index.php создадим первый уровень вложения — регионы и добавочно еще три пустых блока для подгрузки полей выбора нижестоящих уровней. Кнопка Выбрать неактивна до выбора нижнего уровня. По событию onchange происходит вызов xajax-функции Select_Region с передачей всех значений формы. Каждое поле select имеет значение, равное значению КЛАДР для этого пункта. Для значений, предлагающих выбор (например "Выберите регион"), оно равно нулю. Перед вызовом функции предварительно устанавливается значение поля number, равное уровню элемента select, вызывающего функцию. Содержимое файла index.php приведено в листинге 2.9.

Листинг 2.9

<?php

// подключение библиотеки

require_once ("xajax_core/xajax.inc.php");

// подключение внешних файлов require_once ("select_region.php"); require_once ("result_select.php");

// создать новый xajax-объект

$xajax = new xajax();

// регистрация функций

$xajax->register(XAJAX_FUNCTION,"Select_Region");

$xajax->register(XAJAX_FUNCTION,"Result_Select");

// разрешаем обрабатывать xajax асинхронные запросы

$xajax->processRequest();

// подключение к базе данных

require_once("mybaza.php");

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title> Пример 1 (глава 2)к книге "XAJAX" </title>

<?php $xajax->printJavascript(”); ?>

</head>

<body>

<!-шапка ->

<div id=header1><b>Примеры к книге "XAJAX" (глава 2 пример 1)<br>

Динамически подгружаемые select-элементы </b></div>

<br>

<!-Форма ->

<form id=’FormSelectRegion’ method=’post’ action=’javascript:void(null);’ onsubmit=’

xajax.$("ButtonFormSelectRegion").disabled=true; xajax.$("ButtonFormSelectRegion").value="Подождите…"; xajax_Result_Select(document.getElementById("vibor").value);’ enctype="multipart/form-data";>

<input type=’hidden’ id=’number’ name=’number’ value=’0′><br>

<input type=’hidden’ id=’vibor’ name=’vibor’ value=’0′><br>

<b> Выбор населенного пункта </b><br>

<div id=’divselectregion1′>

<?php

<select name=selectregion1 id=’selectregion1′ onchange=’ document.getElementById("number").value=1; xajax_Select_Region(xajax.getFormValues("FormSelectRegion"));’>

<option value="0">Выберите регион

// получить первый уровень — регионы

$query1="SELECT id,name,socr FROM ".TABLE1." WHERE id_rayon=0 && id_town=0 && id_punkt=0 ORDER BY id ASC";

$rez1=mysql_query($query1); while($row1=mysql_fetch_row($rez1))

$text1.="<option value=".$row1[0]." >".$row1[1]." ".$row1[2];

$text1.="</select></div>";

$text1.="<div id=’divselectregion2′></div>";

$text1.="<div id=’divselectregion3′></div>";

$text1.="<div id=’divselectregion4′></div>"; echo $text1;

?>

<input type=’submit’ id=’ButtonFormSelectRegion’ value=’Выбрать’

disabled=true>

</form>

<!—Для вывода результата выбора ->

<div id=’div_result’></div>

</body>

</html>

Рис. 2.11. Динамическая подгрузка в элемент select

Функция Select_Region, расположенная в файле select_region.php, получает значения формы FormSelectRegion и в зависимости от значения поля number выбирает запрос к базе данных. Из базы выбираются значения для следующего уровня select: для региона — районы и города регионального значения; для районов — населенные пункты, подчиненные району; для городов — объекты, подчиненные городу (если есть). По запросу формируется элемент select для нижестоящего уровня и динамически подгружается в блок (рис. 2.11). При этом поле vibor, равное текущему выбранному значению, устанавливается в нуль. Если объ-

ект КЛАДР не имеет нижестоящих объектов, активируется кнопка Выбрать и значение поля vibor устанавливается равным значению объекта КЛАДР.

Содержимое файла select_region.php приведено в листинге 2.10.

Листинг 2.10

<?php

function Select_Region($Id)

{

$objResponse = new xajaxResponse(); require_once("mybaza.php");

switch($Id[number])

{

case 1:

$objResponse->assign("vibor","value",$Id[selectregion1]); if($Id[selectregion1]>0)

{

$query1="SELECT name,socr FROM ".TABLE1." WHERE id=".$Id[selectregion1]." ";

$text1=mysql_result(mysql_query($query1),0,"name")." ";

$text1.=mysql_result(mysql_query($query1),0,"socr");

$text2="<select name=selectregion2 id=’selectregion2′ onchange=’ document.getElementById(\"number\").value=2; xajax_Select_Region(xajax.getFormValues (\"FormSelectRegion\"));’>";

$text2.="<option value=’0′ selected>Выберите район, город";

$objResponse->assign("vibor","value","0");

$query2="SELECT id,name,socr,id_rayon FROM ".TABLE1." WHERE id_punkt=0

&& id_region=".substr($Id[selectregion1],1,2)."

&& (id_rayon=0 || id_town=0) && (id_rayon>0 || id_town>0) ORDER BY id ASC";

$rez2=mysql_query($query2); while($row2=mysql_fetch_row($rez2))

{ if($row2[3]>0)

$text2.="<option value=".$row2[0]." >".$row2[1]." ".$row2[2];

else

$text2.="<option value=".$row2[0]." >".$row2[2]." ".$row2[1];

}

$text2.="</select>";

$objResponse->assign("divselectregion2","innerHTML",$text2);

$objResponse->assign("divselectregion3","innerHTML", "<table></table>");

$objResponse->assign("divselectregion4","innerHTML", "<table></table>");

$objResponse->assign("ButtonFormSelectRegion","disabled", true);

}

else //

{

$objResponse->assign("vibor","value","0");

$objResponse->assign ("divselectregion2","innerHTML","<table></table>");

$objResponse->assign ("divselectregion3","innerHTML","<table></table>");

$objResponse->assign ("divselectregion4","innerHTML","<table></table>");

$objResponse->assign ("ButtonFormSelectRegion","disabled",true);

} break;

case 2:

$objResponse->assign("vibor","value",$Id[selectregion2]); if($Id[selectregion2]>0)

{

if(substr($Id[selectregion2],3,3)<>"000") // район

{

$text2="<select name=selectregion3 id=’selectregion3′ onchange=’ document.getElementById(\"number\").value=3; xajax_Select_Region(xajax.getFormValues (\"FormSelectRegion\"));’>";

$objResponse->assign("vibor","value","0");

$text2.="<option value=’0′ selected>Выберите нас.пункт";

$query2="SELECT id,name,socr FROM ".TABLE1." WHERE id_region=".substr($Id[selectregion2],1,2)."

&& id_rayon=".substr($Id[selectregion2],3,3)."

&& (id_punkt>0 || id_town>0) ORDER BY id ASC ";

$rez2=mysql_query($query2); while($row2=mysql_fetch_row($rez2))

{

$text2.="<option value=".$row2[0].">".$row2[2]."

".$row2[1];

}

$text2.="</select>";

$objResponse->assign ("divselectregion3","innerHTML",$text2);

$objResponse->assign ("divselectregion4","innerHTML","<table></table>");

$objResponse->assign ("ButtonFormSelectRegion","disabled",true);

}

else // город областного подчинения

{

$query2="SELECT id,name,socr FROM ".TABLE1." WHERE id_region=".substr($Id[selectregion2],1,2)."

&& id_rayon=0

&& id_town=".substr($Id[selectregion2],6,3)." ORDER BY id ASC";

$rez2=mysql_query($query2);

if(mysql_num_rows($rez2)==1) // нет вложенных

{

$objResponse->assign ("ButtonFormSelectRegion","disabled",false);

$objResponse->assign ("divselectregion3","innerHTML","<table></table>");

$objResponse->assign

("divselectregion4","innerHTML","<table></table>");

} else

{

$text2="<select name=selectregion3 id=’selectregion3′ onchange=’ document.getElementById(\"number\").value=3; xajax_Select_Region(xajax.getFormValues (\"FormSelectRegion\"));’>";

$objResponse->assign("vibor","value","0");

$text2.="<option value=’0′ selected>Выберите далее";

while($row2=mysql_fetch_row($rez2))

{

$text2.="<option value=".$row2[0].">".$row2[2]." ".$row2[1];

}

$text2.="</select>";

$objResponse->assign ("ButtonFormSelectRegion","disabled",true);

$objResponse->assign ("divselectregion3","innerHTML",$text2);

$objResponse->assign ("divselectregion4","innerHTML","<table></table>");

}

}

}

else //

{

$objResponse->assign ("ButtonFormSelectRegion","disabled",true);

$objResponse->assign("vibor","value","0");

$objResponse->assign ("divselectregion3","innerHTML","<table></table>");

$objResponse->assign ("divselectregion4","innerHTML","<table></table>");

} break;

case 3: if($Id[selectregion3]>0)

{

$objResponse->assign ("ButtonFormSelectRegion","disabled",false);

$objResponse->assign("vibor","value",$Id[selectregion3]);

$objResponse->assign ("divselectregion4","innerHTML","<table></table>");

} else

{

$objResponse->assign("ButtonFormSelectRegion","disabled",true);

$objResponse->assign("vibor","value","0");

$objResponse->assign ("divselectregion4","innerHTML","<table></table>");

}

default: break;

}

return $objResponse;

}

?>

При нажатии на кнопку Выбрать происходит вызов xajax-функции Result_Select. Функции передается значение объекта КЛАДР из поля vibor. По этому коду формируем полный путь к объекту КЛАДР и выводим результат на страницу (рис. 2.12). Функция Result_Select расположена в файле result_select.php

(листинг 2.11). Посмотреть в сети Интернет пример использования КЛАДР вы можете по адресу www.bazakatalogov.ru.

Рис. 2.12. Вывод результата выбора

Листинг 2.11

<?php

function Result_Select($Id)

{

$objResponse = new xajaxResponse(); require_once("mybaza.php");

$text="Ваш выбор :<br>";

$text.="КЛАДР ".$Id."<br>";

$id_region=substr($Id,1,2);

$id_rayon=substr($Id,3,3);

$id_town=substr($Id,6,3);

$id_punkt=substr($Id,9,3);

// регион

$query1="SELECT name,socr FROM ".TABLE1." WHERE id_region=’".$id_region."’ ";

$text.=mysql_result(mysql_query($query1),0,"name");

$text.=" ".mysql_result(mysql_query($query1),0,"socr");

// район

if($id_rayon>0)

{

$query1="SELECT name,socr FROM ".TABLE1." WHERE id_region=’".$id_region."’ && id_rayon=’".$id_rayon."’ ";

$text.=" -> <br>".mysql_result(mysql_query($query1),0,"name");

$text.=" ".mysql_result(mysql_query($query1),0,"socr");

}

// город

if($id_town>0)

{

$query1="SELECT name,socr FROM ".TABLE1." WHERE id_region=’".$id_region."’ && id_rayon=’".$id_rayon."’

&& id_town=’".$id_town."’ ";

$text.=" -> <br>".mysql_result(mysql_query($query1),0,"socr");

$text.=" ".mysql_result(mysql_query($query1),0,"name");

}

// нас.пункт

if($id_punkt>0)

{

$query1="SELECT name,socr FROM ".TABLE1." WHERE id_region=’".$id_region."’ && id_rayon=’".$id_rayon."’

&& id_town=’".$id_town."’ && id_punkt=’".$id_punkt."’ ";

$text.=" -> <br>".mysql_result(mysql_query($query1),0,"socr");

$text.=" ".mysql_result(mysql_query($query1),0,"name");

}

$objResponse->assign("div_result","innerHTML",$text);

$objResponse->assign("ButtonFormSelectRegion","value","Выбрать");

$objResponse->assign("ButtonFormSelectRegion","disabled",false);

return $objResponse;

}

?>

Источник: Петин В. А., Сайт на AJAX под ключ. Готовое решение для интернет-магазина. — СПб.: БХВ-Петербург, 2011. — 432 с.: ил. + CD-ROM — (Профессиональное программирование)

Похожие посты:

Комментировать

Your email address will not be published. Required fields are marked *