Связанные списки select — PHP, Ajax, JS

     

Привет!

Начинаю рубрику именно с этой статьи. Она будет полезна для начинающих и пригодится для тех, кто не пользуется готовыми движками, а создает что-то свое! На просторах интернета валяется очень много уроков по связным спискам select, но все они сложны для понимания, особенно, если ты только начинаешь программировать!

В данной статье я предложу вам доступное и понятное решение, которое можно будет доработать и поставить на сайт.

Итак, здесь я использую связку следующих языков:

JavaScript — забираем пункт из первого списка
Ajax — получаем пункт из первого списка и передаем на обработку серверу
PHP — принимаем значение и отдаем на выходя связанные пункты второго select
MySQL — в примере работаем с MySQL — получаем пункты второго списка из базы

Так как мы работаем с базами данных, подключайте к файлу базу MySQL.
Для того, чтобы мы могли использовать Ajax — нам необходимо подключить сперва библиотеку jQuery (скачать можно здесь).

Заходим в теги head нашей странички и подключаем библиотеку:

<script src="/js/jquery-1.5.1.js"></script>

У меня на сайте есть папка js, где находится файл с библиотекой (пардон, у меня старая версия, скачайте новую и укажите название файла верно).

Теперь давайте в теле нашего файла index.php (у меня файл называться будет так) расположим два select, которые мы с вами и будем связывать между собой! ВНИМАТЕЛЬНО! Тут я уже буду использовать MySQL для вытаскивания записей из первого списка!

Мы будем выводить марки автомобилей по стране-производителю.

<?php

//вытаскиваем данные для первого списка
echo
'
Страна: 
<select name="country" id="country" style="border:1px solid #000000;width:150px;" onchange="javascript:w_auto(this.value);return false;">';
if($_POST["country"]*1)echo '<option value="0">-------- Изготовитель ---------</option>';
else echo '<option value="0">-------- Изготовитель ---------</option>';
    	    
$ds5 = mysql_query("SELECT * FROM `country`");
if(mysql_num_rows($ds5))
{
       while($data5 = mysql_fetch_array($ds5))
       {
	     if($_POST["country"]== $data5["id"])echo '<option value="'.$data5["id"].'" selected>'.$data5["name"].'</option>';
	     else echo '<option value="'.$data5["id"].'">'.$data5["name"].'</option>';
       }
}
echo 
'
</select>
';

//специально отделяю второй список для того, чтобы код был более наглядным

echo
'
<br />
Авто: 
<select name="auto" id="auto" style="border:1px solid #000000;width:150px;">
</select>
';

?>

Итак, пояснения по php коду:

Как вы видите у нас есть два селекта, первый select у нас активные, т.е. УЖЕ содержит в себе уникальные значения, а второй селект подгружаемый, его значения будут определены тогда, когда вы передадим значение из списка стран!

Обратите внимание на первый список со странами, а именно на строчку:

<select name="country" id="country" style="border:1px solid #000000;width:150px;" onchange="javascript:w_auto(this.value);return false;">

Мы даем селекту id=»country», а также при выборе одного из пунктов списка применяем javascript-функцию под названием w_auto(this.value);, которая в качестве параметра принимает значение выбранного пункта this.value.

Ну вот! Теперь у нас есть страничка с подключенной библиотекой jQuery и кодом PHP для списков! Нам теперь необходимо описать функцию w_auto, которая примет значение из первого списка со странами, передаст это значение посредством Ajax обработчику, который вернет нам все значения во второй список с автошками!

Давайте напишем функцию w_auto, нам для этого необходимо опять поработать с файлом index.php! Заходим в head странички и после объявления библиотеки пишем следующий код:

<script>

//объявляем функцию
//название у функии как в первом селекте - w_auto
//в качестве параметра принимаем this.value - в JS коде называем ее понятной переменной country

function w_auto(country)
{
       if(country!=0)
       {
              /*
              Внимательно посмотрите на первый список, вы можете увидеть, что когда мы еще не выбрали ни одного пункта
              мы видем надпись ----Изготовитель----- и если посмотреть на option, то можно увидеть значение value=0
              Итак, я хочу, чтобы функция обращалась к обработчику только в случае, если человек все-таки выбрал пункт из списка,
              поэтому пишу условие if(country!=0)
              */

              $("#auto").load("/modules/handler.php",{country_s1:country});
       }
       else
       {
              //если человек не выбрал ни одного из пунктов, то втором списке мы не видим ни одного пункта
              $("#auto").html("");
       }
}

</script>

Пояснения:

$("#auto").load("/modules/handler.php",{country_s1:country});

Загружаем во второй селект с id=»auto» значения автошек, принадлежащих определенному country_s1 изготовителю! Эту country_s1 как хотите, так и называйте, главное давать осмысленное название, чтобы обратиться к ней из обработчика, country — это знакомая нам переменная, которая равна выбранному значению из первого списка.

/modules/handler.php — это путь к обработчику, у меня он лежит в папке modules, название handler.php

$("#auto").html("");

Если человек не выбрал страну, то очищаем второй список, не выводим никаких пунктов!

Ну вот мы и подошли к последнему пункту нашей работы — обработчик handler.php, именно он и будет отдавать нам наименования автомобилей по изготовителю.
Создаем файлик handler.php

<?php
include(mysql.php); //подключаем нашу базу данных

$country_s1=$_REQUEST["country_s1"];//забираем нашу переменную, ОБРАТИТЕ внимание на название переменной $_REQUEST["country_s1"]

//если переменная получена
if($country_s1)
{
      //нам надо получить option для второго селекта
      echo '<option value="0">---------Выберите авто---------</option>';
      $sql1="SELECT * FROM autos WHERE country_id={$country_s1} ORDER BY name_auto ASC";
      $ds1=mysql_query($sql1);
      if(mysql_num_rows($ds1))
      {
		while($data1=mysql_fetch_array($ds1))
		{
			echo '<option value="'.$data1["id"].'">'.$data1["name_auto"].'</option>';
		}
     }
}

?>

Вот и все! :) Теперь если мы в броузере зайдем на страничку index.php и выберем в первом списке страну, то во втором увидим связанный с этой страной список авто :)

Если что-то не понятно или не получается — отписывайтесь в комменты! Если у вас не такая простая задачка, а что-то еще необходимо сделать со списками — пишите, сделаем :)



Понравилась статья? Подпишитесь на RSS!
     

Comments are closed.