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.
Popularity: 19%
Arkadiusz Tobiasz student Akademii Ekonomicznej im. Karola Adamieckiego w Katowicach na specjalnościach informatyka ekonomiczna oraz rachunkowość. 
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
Musi działać, skoro mój skrypt działa, pliki można już ściągać.
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
trudno mi stwierdzić, może coś z ustawieniami serwera…
A gdzie jest zawartość pliku includowanego config.php
w pliku config.php znajduje się połączenie z bazą danych.
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
Dobra juz wiem
<?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.”;
}
}
?>
Powyższy wpis nie generuje mi 2 pola WHY?
Widocznie coś zrobiłeś źle, wróżką nie jestem