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

lamo · 25 Июн 2009

Допустим есть БД, есть таблица с категориями авто и таблица с марками авто, все в MySQL.

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

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

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

tostrss · 25 Июн 2009

Проще всего это сделать через 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 · 13 Июл 2009

а вдруг кто будет искать и откроет эту тему, так вот готовое решение на jQuery с примерами php-файлов для AJAX

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

lamo · 2 Авг 2009

Не работает в Опере и в гугл Хроме... =(
Может кто встречался с такой бедой?

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

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 · 28 Авг 2009

Мой скрипт на 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 · 10 Сен 2009

WerewolfGSM написал(а):
Мой скрипт на mootools ver 1.1

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

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

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

WerewolfGSM · 11 Сен 2009

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

а это что???

$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 · 11 Сен 2009

WerewolfGSM написал(а):
В этом куске реализованы зависимые селекты.
Скажите что вы хотите сделать, придумаем как это реализовать.

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

WerewolfGSM · 14 Сен 2009

Структуру таблиц пожалуйста в студию. Чтоб не гадать на кофейной гуще.

victor89 · 13 Окт 2009

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

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

lamo

Постоялец

tostrss

Мой дом здесь!

nuke333

Создатель

lamo

Постоялец

WerewolfGSM

Creative Developer

shmitacc

Постоялец

WerewolfGSM

Creative Developer

shmitacc

Постоялец

WerewolfGSM

Creative Developer

victor89

Постоялец