1. Начата процедура восстановления социальных групп. Лидерам старых и новых групп обязательно ознакомиться с регламентом проведения работ.

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

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

Страница 1 из 2
  1. TopicStarter Overlay

    lamo

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

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

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

    Спасибо всем, кто поможет, очень надо.
    lamo, 25 июн 2009
    #1 Вверх

  2. tostrss

    Проще всего это сделать через 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
    tostrss, 25 июн 2009
    #2 Вверх

  3. nuke333

    nuke333, 13 июл 2009
    #3 Вверх
    Pup_vseya нравится это.
  4. TopicStarter Overlay

    lamo

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

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


    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... а вот в опере и гугл хроме что то нет =( помогите пожалуйста...
    lamo, 2 авг 2009
    #4 Вверх

  5. WerewolfGSM

    Мой скрипт на 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;


    ?>
    WerewolfGSM, 28 авг 2009
    #5 Вверх

  6. shmitacc

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

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

    И должен же присутствовать аякс.. а тут даже яваскрипт не используеться...
    Можно пояснения?
    shmitacc, 11 сен 2009
    #6 Вверх

  7. WerewolfGSM

    а это что??? :eek:
    Можно качнуть отсюда.

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

  8. shmitacc

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

  9. WerewolfGSM

    Структуру таблиц пожалуйста в студию. Чтоб не гадать на кофейной гуще.
    WerewolfGSM, 15 сен 2009
    #9 Вверх

  10. victor89

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