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

Тема в разделе "FAQ", создана пользователем lamo, 25 июн 2009.

Статус темы:
Закрыта.
  1. lamo

    lamo Постоялец

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

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

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

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

    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
    http://www.rsdn.ru/article/inet/jQuery.xml
     
  3. nuke333

    nuke333 Создатель

    Регистр.:
    8 дек 2008
    Сообщения:
    47
    Симпатии:
    12
    Pup_vseya нравится это.
  4. lamo

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

    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;


    ?>
     
  6. shmitacc

    shmitacc Постоялец

    Регистр.:
    31 авг 2009
    Сообщения:
    76
    Симпатии:
    6
    Это значит что нужно что то подсоединять?

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

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

    WerewolfGSM

    Регистр.:
    4 дек 2006
    Сообщения:
    257
    Симпатии:
    11
    а это что??? :eek:
    Можно качнуть отсюда.
    http://www.medialand.com.ua/media/system/js/mootools.js
    Что именно не понятно? Это кусок готового модуля. В этом куске реализованы зависимые селекты.
    Скажите что вы хотите сделать, придумаем как это реализовать.
     
  8. shmitacc

    shmitacc Постоялец

    Регистр.:
    31 авг 2009
    Сообщения:
    76
    Симпатии:
    6
    Есть три таблицы базы данных(страна, регион, город). Нужно сделать часть скрипта быстрого поиска, в котором при выборе страны подтягивался селект с выбором города.
     
  9. WerewolfGSM

    WerewolfGSM

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

    victor89 Постоялец

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