jQuery: powiązane pola select

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.

Comments

zbyszek

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

Reply
    Arkadiusz Tobiasz

    Musi działać, skoro mój skrypt działa, pliki można już ściągać.

    Reply
worm4

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

Reply
    Arkadiusz Tobiasz

    trudno mi stwierdzić, może coś z ustawieniami serwera…

    Reply
Dariusz

A gdzie jest zawartość pliku includowanego config.php

Reply
    Arkadiusz Tobiasz

    w pliku config.php znajduje się połączenie z bazą danych.

    Reply
michal

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

Reply
michal

Dobra juz wiem 🙂

Reply
Misiek

<?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.”;
}
}

?>

Reply
Misiek

Powyższy wpis nie generuje mi 2 pola WHY?

Reply
    Arkadiusz Tobiasz

    Widocznie coś zrobiłeś źle, wróżką nie jestem

    Reply
Jankes

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ć?

Reply

Leave a Comment

thirteen − five =