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

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

lamo

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

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

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

Спасибо всем, кто поможет, очень надо.
 
Проще всего это сделать через 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
 
а вдруг кто будет искать и откроет эту тему, так вот готовое решение на jQuery с примерами php-файлов для AJAX

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

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


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... а вот в опере и гугл хроме что то нет =( помогите пожалуйста...
 
Мой скрипт на 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;


?>
 
Мой скрипт на mootools ver 1.1
Это значит что нужно что то подсоединять?

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

И должен же присутствовать аякс.. а тут даже яваскрипт не используеться...
Можно пояснения?
 
И должен же присутствовать аякс.. а тут даже яваскрипт не используеться...
а это что??? :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>";

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

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

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