Как сделать зависимые select'ы

Статус
В этой теме нельзя размещать новые ответы.

lamo

Постоялец
Регистрация
1 Июл 2008
Сообщения
51
Реакции
4
Допустим есть БД, есть таблица с категориями авто и таблица с марками авто, все в MySQL.

Я добавляю объявление, выбираю категорию авто (допустим легковой транспорт), как сделать что бы второй select заполнился марками машин (взял значения из таблицы)?

Буду рад коду или ссылки на хороший ресурс по данной теме.

Спасибо всем, кто поможет, очень надо.
 

tostrss

Мой дом здесь!
Регистрация
16 Окт 2007
Сообщения
771
Реакции
217
Проще всего это сделать через ajax. Вешаешь на селект обработчик на событие OnChange.

к примеру есть такой селект

Код:
<select name="car" OnChange="GetMark(this.value);">
<option value="1">Класс А</option>
<option value="2">Класс B</option>
<option value="3">Класс C</option>
</select>

потом создаешь функцию GetMark
Код:
function GetMark(cat_id) { /*принимаем номер категории*/
тут создаем ajax запрос к пхп файлу, который вернет тебе все марки.
В каком виде, это тебе решать, можно в html виде, тогда просто этот код вставляешь на страницу, а можно еще динамично добавлять к селекту элементы..
}


Для аджакса и вообще твоего скрипта в целом, я бы посоветовал тебе использовать библиотеку JQuery
 

nuke333

Создатель
Регистрация
8 Дек 2008
Сообщения
47
Реакции
12
а вдруг кто будет искать и откроет эту тему, так вот готовое решение на jQuery с примерами php-файлов для AJAX

Для просмотра ссылки Войди или Зарегистрируйся
 

lamo

Постоялец
Регистрация
1 Июл 2008
Сообщения
51
Реакции
4
Не работает в Опере и в гугл Хроме... =(
Может кто встречался с такой бедой?

Реализовано у меня так:


PHP:
<script src="JsHttpRequest.js"></script>
<script>
function doload(value){
var req=new JsHttpRequest();
req.onreadystatechange=function(){
if(req.readyState==4) document.getElementById("result").innerHTML=req.responseText;}
req.open(null,"subrubrlist.php",true);
req.send({rubr:value});}
</script>

.....
echo '
			<table width="100%" border="0" cellspacing="4" cellpadding="1" bgcolor="#F2F4F4">
			<tr><td><span class="red">*</span> Раздел:</td><td><form name="" action="?add=new" method="post">
			<select size="1" name="rubr" style="width: 250px; color: #595959" onchange="doload(this.value);">
			  <option value="0">Выберете раздел</option>';
			  get_rubr_names($rubr);
      echo '</select></td>
            </tr>
            <tr><td><span class="red">*</span> Подраздел:</td><td>
			<div id="result">';

            if (!empty($rubr))
            {
             echo '<select size="1" name="subrub" style="width: 250px; color: #595959;">';
             get_subrubr_names($rubr,$value);
             echo '</select>';
            }
            else
      echo '<select size="1" name="subrub" style="width: 250px; color: #595959; background:#DBDFDF;" disabled="disabled">
			   <option value="0">Выберете подраздел</option>
			</select>';
      echo '</div>
            </td></tr>


Содержимое subrubrlist.php

PHP:
<?
 include "connect_db.php";
 require("JsHttpRequest.php"); //Подключаем библиотеку
 $JsHttpRequest=new JsHttpRequest("windows-1251");
 $html=null;


      $rubr=$_REQUEST["rubr"];

      $html = '<select size="1" name="subrub" style="width: 250px; color: #595959">';
	  $query = "SELECT * FROM subrubr WHERE rubr_id=".$rubr;

	  $result_id = mysql_query ($query) or print ("<p><b>Ошибка</b> при формировании подразделов</p>");
	  while ($row = mysql_fetch_row ($result_id))
	  {
	   $html = $html.'<option value="'.$row[0].'">'.$row[2].'</option>';
	  }
      $html = $html.'</select>';

      if (empty($rubr))
      $html = '<select size="1" name="subrub" style="width: 250px; color: #595959; background:#DBDFDF;" disabled="disabled">
			     <option value="0">Выберете подраздел</option>
			    </select>';

 echo $html;
?>

Внешне селекты взаимодействуют между собой, т.е. при выборе рубрики меняется подрубрика, но вот при сохранении выбранного значеня по методу POST возращается пустое значение...

Идеально работает в IE 6... а вот в опере и гугл хроме что то нет =( помогите пожалуйста...
 

WerewolfGSM

Старатель
Регистрация
4 Дек 2006
Сообщения
257
Реакции
11
Мой скрипт на mootools ver 1.1
проверено на ие 6-8, фф, хроме, опере. Везде работает.
В моем примере от бренда зависит тип продукции. Делаем так:
Генерация первоначального ХТМЛ (это кусок функции генерации большой формы:(
PHP:
$output .= "	<tr>";
		$output .= "		<td>Бренд</td>";
		$output .= "		<td>";
		$output .= "			<select name='WhereBuySelectBrand' id='WhereBuySelectBrand' onchange=\"wbChangeDirect()\">";
		$output .= "				<option value =\"0\" selected = \"selected\">Все...</option>";
		$SQL = "SELECT w.ID, w.Brand FROM wbBrand w ORDER BY w.Brand";
		$mySQL = new mysql();
		$mySQL->connect();
		$mySQL->tmpl = $SQL;
		$mySQL->args = array();
		$mySQL->query(__FILE__,__LINE__);
		$DataSource = $mySQL->result;
		$mySQL->close();						
		while ($row=mysql_fetch_array($DataSource)){
		$et_Value = $row[Brand];
		$et_ID = $row[ID];
			$output .= "<option value =\"".$et_ID."\">".cnUTF($et_Value)."</option>";	
		}
	
		$output .= "</select>";		
	
		$output .= "		</td>";
		$output .= "	</tr>";
		
		$output .= "	<tr>";
		$output .= "		<td>Направление</td>";
		$output .= "		<td>";
		$output .= "			<div id='WhereBuySelectDirectDiv'><select name='WhereBuySelectDirect' id='WhereBuySelectDirect'>";
		$output .= "				<option value =\"0\" selected = \"selected\">Укажите направление...</option>";
		$SQL = "SELECT w.ID, w.Direct FROM wbDirect w ORDER BY w.Direct";
		$mySQL = new mysql();
		$mySQL->connect();
		$mySQL->tmpl = $SQL;
		$mySQL->args = array();
		$mySQL->query(__FILE__,__LINE__);
		$DataSource = $mySQL->result;
		$mySQL->close();						
		while ($row=mysql_fetch_array($DataSource)){
		$et_Value = $row[Direct];
		$et_ID = $row[ID];
			$output .= "<option value =\"".$et_ID."\">".cnUTF($et_Value)."</option>";	
		}
	
		$output .= "</select></div>";		
	
		$output .= "		</td>";
		$output .= "	</tr>";
За выбор какого либо элемента отвечает яваскрипт функция wbChangeDirect();
Чуть дальше описываем функцию wbChangeDirect()
PHP:
$output .= "<script>";		
		$output .= "function wbChangeDirect() {\n";

$output .= "var req = new Ajax('http://www.xxxxx.eu/class.changedirect.php?id='+$('WhereBuySelectBrand').value, {method:'get',update:$('WhereBuySelectDirectDiv') , data: 'id1=ddd'}).request();";
$output .= "}";		
$output .= "</script>";
Файл class.changedirect.php отвечает за генерацию нового списка в подчиненный select.
Текст файла class.changedirect.php
PHP:
<?
require_once("configdb.inc.php");
require_once("mysql.inc.php");

header('Content-Type: text/html;charset=utf-8');	

if(isset($_GET['id'])) $id = (int)$_GET['id'];

if ($id == 0) {
		$output = "			<select name='WhereBuySelectDirect' id='WhereBuySelectDirect'>	<option value =\"0\" selected = \"selected\">Укажите направление...</option>";
		$SQL = "SELECT w.ID, w.Direct FROM wbDirect w ORDER BY w.Direct";
		$mySQL = new mysql();
		$mySQL->connect();
		$mySQL->tmpl = $SQL;
		$mySQL->args = array();
		$mySQL->query(__FILE__,__LINE__);
		$DataSource = $mySQL->result;
		$mySQL->close();						
		while ($row=mysql_fetch_array($DataSource)){
		$et_Value = $row[Direct];
		$et_ID = $row[ID];
			$output .= "<option value =\"".$et_ID."\">".cnUTF($et_Value)."</option>";	
		}
		$output .="</select>";
} else {
	
	$output = "<select name='WhereBuySelectDirect' id='WhereBuySelectDirect'><option value ='0' selected = 'selected'>Укажите направление...</option>\n";
		$SQL = "SELECT w.ID, d.Direct FROM wbBrandDirect w LEFT JOIN wbDirect d ON w.DirectID = d.ID WHERE w.BrandID = $id";
		$mySQL = new mysql();
		$mySQL->connect();
		$mySQL->tmpl = $SQL;
		$mySQL->args = array();
		$mySQL->query(__FILE__,__LINE__);
		$DataSource = $mySQL->result;
		$mySQL->close();						
		while ($row=mysql_fetch_array($DataSource)){
		$et_Value = $row[Direct];
		$et_ID = $row[ID];
			$output .= "<option value ='".$et_ID."'>".cnUTF($et_Value)."</option>\n";	
		}
		$output .="</select>";
}
echo $output;


?>
 

shmitacc

Постоялец
Регистрация
31 Авг 2009
Сообщения
76
Реакции
6
Мой скрипт на mootools ver 1.1
Это значит что нужно что то подсоединять?

И как эти три куска кода использовать?

И должен же присутствовать аякс.. а тут даже яваскрипт не используеться...
Можно пояснения?
 

WerewolfGSM

Старатель
Регистрация
4 Дек 2006
Сообщения
257
Реакции
11
И должен же присутствовать аякс.. а тут даже яваскрипт не используеться...
а это что??? :eek:
$output .= "<script>";
$output .= "function wbChangeDirect() {\n";
$output .= "var req = new Ajax('http://www.xxxxx.eu/class.changedirect.php?id='+$('WhereBuySelectBrand').value, {method:'get',update:$('WhereBuySelectDirectDiv') , data: 'id1=ddd'}).request();";
$output .= "}";
$output .= "</script>";

Это значит что нужно что то подсоединять?
Можно качнуть отсюда.

Что именно не понятно? Это кусок готового модуля. В этом куске реализованы зависимые селекты.
Скажите что вы хотите сделать, придумаем как это реализовать.
 

shmitacc

Постоялец
Регистрация
31 Авг 2009
Сообщения
76
Реакции
6
В этом куске реализованы зависимые селекты.
Скажите что вы хотите сделать, придумаем как это реализовать.

Есть три таблицы базы данных(страна, регион, город). Нужно сделать часть скрипта быстрого поиска, в котором при выборе страны подтягивался селект с выбором города.
 

WerewolfGSM

Старатель
Регистрация
4 Дек 2006
Сообщения
257
Реакции
11
Структуру таблиц пожалуйста в студию. Чтоб не гадать на кофейной гуще.
 

victor89

Постоялец
Регистрация
6 Май 2008
Сообщения
83
Реакции
14
Здравствуй.
Сначала тебе нужно разобратся с ажаксом (советую посетить Для просмотра ссылки Войди или Зарегистрируйся).
Весь алгоритм работы дольно прост:
1. Получение 1 параметра при выборе в селекте
2. Отправка запроса на пхп скрипт, в котором отправляется данный параметр
3. Пхп скрипт формирует запрос по даному параметру, производит запрос к бд и возращает в удобном для тебя форме(json,xml,или даж просто строчка разделенная какимто символом) данные
4. Жаваскрипт получив данные парсит их и строит опции.
И так можно построить сколько селектов сколько тебе понадобится.
 
Статус
В этой теме нельзя размещать новые ответы.
Сверху