jQuery: powiązane pola select

Autor: Arkadiusz Tobiasz 9 sierpnia 2010

Jakiś czas temu napisałem jak można powiązać ze sobą dwa pola select, tak aby drugi generował się dynamicznie na podstawie wyboru dokonanego w pierwszym polu select. Dzisiaj postanowiłem opisać w jaki sposób można osiągnąć podobny efekt wykorzystując do tego bibliotekę jQuery.

Na początku musimy utworzyć odpowiednie wpisy w bazie danych. Podobnie jak w przywołanym wpisie utworzymy dwie tabele marki i modele samochodów, gdzie dane zawarte w tabeli modele będą powiązane z danymi zawartymi w tabeli marki. Odpowiednie zapytanie do bazy danych znajdziesz poniżej:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
CREATE TABLE `marki` (
`id` INT(9) NOT NULL AUTO_INCREMENT,
`marka` VARCHAR(255) NOT NULL DEFAULT '',
PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin2 ;

INSERT INTO `marki` VALUES(1, 'Audi');
INSERT INTO `marki` VALUES(2, 'BMW');

CREATE TABLE `modele` (
`id` INT(9) NOT NULL AUTO_INCREMENT,
`mid` INT(9) NOT NULL DEFAULT '0',
`model` VARCHAR(255) NOT NULL DEFAULT '',
PRIMARY KEY  (`id`),
KEY `mid` (`mid`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin2 ;

INSERT INTO `modele` VALUES(1, 1, 'A3');
INSERT INTO `modele` VALUES(2, 1, 'A4');
INSERT INTO `modele` VALUES(3, 2, '320');
INSERT INTO `modele` VALUES(4, 2, '323');
INSERT INTO `modele` VALUES(5, 2, '324');

Zacznijmy od wyświetlenia pierwszego pola select, które będzie listowało dostępne marki samochodów z naszej bazy danych:

1
2
3
4
5
6
7
8
9
10
include("config.php");
        echo '<select name="marka" class="marka" width="25">'
        .'<option value="">--wybierz markę--</option>';
        $result2 = mysql_query("SELECT id, marka FROM marki ORDER BY marka");
        while ($row = mysql_fetch_array($result2)) {
          $id = intval($row['id']);
          $marka = $row['marka'];
          echo '<option value="'.$id.'">'.$marka.'</option>';
        }
        echo '</select><br>';

i jeszcze select listujący dostępne marki:

1
2
3
echo '<select class="model" name="model">'
.'<option selected="selected">--wybierz model--</option>'
.'</select>';

Teraz wracamy do sekcji <head>…</head> naszego skryptu, gdzie najpierw dołączamy bibliotekę jQuery:

1
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

a następnie skrypt odpowiedzialny za dynamiczne generowanie wartości do drugiego selecta:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
$(document).ready(function()
{
     $(".marka").change(function()
     {
     var id = $(this).val();
     var dataString = 'id='+ id;

     $.ajax
          ({
               type: "POST",
               url: "ajax_model.php",
               data: dataString,
               cache: false,
               success: function(html)
               {
                    $(".model").html(html);
               }
          });
     });
});
</script>

Funkcja jest uruchamiana w momencie zmiany elementu, który ma zadeklarowaną klasę jako marka. Chodzi tutaj o naszego pierwszego selecta. Wtedy też tworzymy zmienną id, do której przypisujemy wartość pierwszego selecta. Tworzona jest również zmienna dataString, do której przypisujemy wartość zmiennej id. Następnie wysyłamy do skryptu ajax_model.php zmienną dataString. W przypadku, gdy wszystko zakończy się powodzeniem do naszej, którą nazwaliśmy model wstawiamy zawartość, która została wygenerowana przez skrypt ajax_model.php. Skrypt ten prezentuje się tak:

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
      $mid = $_POST['id'];
      if(!empty($mid)) {
        include("config.php")
        $result2 = mysql_query("SELECT id, model FROM modele WHERE mid=".$mid." ORDER BY model");

        while ($row = mysql_fetch_array($result2)) {
          $id = intval($row['id']);
          $model = $row['model'];
          echo '<option value="'.$id.'">'.$model.'</option>';
        }
       }
?>

Działający skrypt znajdziesz tutaj, a pliki możesz pobrać tutaj.

komentarzy 13

  1. zbyszek napisał(a):

    Niestety opisany przyklad nie działa. konkretnie skrypt nie przekazuje zmiennej do drugiego selekta. Dobrym zwyczajem byloby umozliwenie ściągnięcia finalnych skryptów – wtedy kazdy móglby przeanalizować jak powstaje takie rozwiązanie i sprawdzić jego działanie na własnym serwerze

  2. worm4 napisał(a):

    Witam, lokalnie działa, na serwerze online nie chce, próbowałem inną metodą i to samo, lokalnie działa, ale na serwerze online już nie.
    Czy wiesz może w czym może być problem. Uprawnienia dostępu do jquery są i ścieżki prawidłowe. Pozdrawiam

  3. Dariusz napisał(a):

    A gdzie jest zawartość pliku includowanego config.php

  4. michal napisał(a):

    Działa, działa 🙂 Wielkie dzięki, dobry artykuł.
    Ja mam tylko 1 problem. W drugim seleccie znika mi pierwszy option, ten który powinien być zaznaczony. Wiecie dlaczego?
    http://ekstraklasa.h2.pl/projekt/index.php?par1=dodajwyjazd&par2=miasta&par3=11

  5. michal napisał(a):

    Dobra juz wiem 🙂

  6. Misiek napisał(a):

    <?php
    echo '–wybier model–‚;
    $mid = $_POST[‚id’];
    if(!empty($mid)) {
    include(„connect.php”);
    $result2 = mysql_query(„SELECT miasto, nazwa FROM region_miasto WHERE wojewodztwo_id=”.$mid.” ORDER BY nazwa”);
    while ($row = mysql_fetch_array($result2)) {
    $id = intval($row[‚miasto’]);
    $model = $row[‚nazwa’];
    echo ”.$model.”;
    }
    }

    ?>

  7. Misiek napisał(a):

    Powyższy wpis nie generuje mi 2 pola WHY?

  8. Jankes napisał(a):

    Chciałem zrobić powiązanie trzech elementów select za pomocą jQuery. Wykonałem to analogicznie do metody w Ajaxie, ale potrzebuję aby wartość z pierwszego wyboru tj. kategoria była również przekazywana do ostatniego, czyli modelu? Jak to wykonać?

Odpowiedz

 

Arkadiusz Tobiasz student Akademii Ekonomicznej im. Karola Adamieckiego w Katowicach na specjalnościach informatyka ekonomiczna oraz rachunkowość. Więcej...

jQuery Validation i funkcja remote

Jakiś czas temu zwrócił się do mnie użytkownik z problemem. Chodzi o to, że korzysta on z pluginu walidacji jQuery, […]

Zend Framework: integracja z Uploadify

W tym wpisie postaram się przedstawić Wam w jaki sposób zintegrować skrypt Uploadify z Zend Frameworkiem. Dzięki temu będziemy mogli […]

Javascript: Czasowe wyświetlanie reklamy

Czasami chcemy, aby na pewnym elemencie naszej strony wyświetlała się reklama przez jakiś czas, a następnie zniknęła. W tym wpisie […]

Linux: backup wszystkich baz danych MySQL

Swego czasu pisałem o tym jak z poziomu konsoli można szybko i przyjemnie zrobić backup bazy MySQL. Wszystko jest ładnie […]