Nieraz w serwisach internetowych widziałeś dynamiczne pola select, które uaktywniały się po wyborze opcji z pierwszego selecta. Jeśli chcesz mieć coś takiego na swojej stronie, to ten wpis jest dla Ciebie. Postaram się tutaj krok po kroku pokazać jak to zrobić.
Zacznijmy od prostego formularza w html-u:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <form> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <title>Prosta strona HTML</title> </head> <body> <form> <table width="300" border="0"> <tr> <td width="200"> <select name="mid" id="mid"> <option value="">Wybierz markę</option> <option value="1">Audi</option> <option value="2">BMW</option> </select> </td> <td width="100"> <select name="model" id="model"> <option value="">Wybierz model</option> <option value="1">A3</option> <option value="2">A4</option> <option value="2">323</option> </select> </td> </tr> </table> </form> </body> </html> |
Jak widzimy w powyższym kodzie kiedy wybierzemy daną markę samochodu, dajmy na to BMW, to w modelach mamy do wyboru także modele Audi. W tym tutorialu po wyborze marki będą dostępne modele tylko wybranej marki.
Swój skrypt napiszemy w PHP wykorzystując MySQL. W tym celu musimy utworzyć dwie tabele, pierwszą, w której będziemy trzymać dane dotyczące marek samochodu oraz drugą z odpowiednimi modelami samochodów.
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'); |
Krótki komentarz, tworzymy powyżej dwie tabele marki i modele, tabela modele jest powiązana z tabelą marki za pomocą klucza mid.
Przyszedł czas na modyfikację kodu HTML i przerobienie go na skrypt php, który nazwiemy samochody.php. Musimy linijki 12-16 przerobić w taki sposób, aby dane były pobierane z bazy danych. A więc fragment:
1 2 3 4 5 |
zamieniamy na:
1 2 3 4 5 6 7 8 9 10 11 12 | <?php include("config.php"); echo "<select name="mid" onchange="ajaxFunction()" id="mid" width="25">" ."<option value="">--wybierz--</option>"; $result2 = mysql_query("SELECT id, marka FROM marki ORDER BY marka"); while ($row = mysql_fetch_array($result2)) { $mid = intval($row['id']); $marka = $row['marka']; echo"<option value="".$mid."">".$marka."</option>"; } echo"</select><br>"; ?> |
W powyższym kodzie dołączyliśmy jeszcze jeden plik, który odpowiada za połączenie z bazą danych. Plik config.php wygląda następująco:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <?php $sql_host = "localhost"; // host bazy danych, najczesciej localhost $sql_user = "tobiasz_arek"; // uzytkownik bazy danych $sql_password = "haselko"; // haslo do bazy danych $sql_baza = "tobiasz_auto"; // nazwa bazy danych, z ktorej bedzie korzystal portal $prefix = "toar"; // prefix uzywany dla tabel korzystajacych z systemu ToAr /* Polaczenie z MySQL'em */ $baza = mysql_connect($sql_host, $sql_user, $sql_password); if ($baza) { /* Jezeli polaczenie zostalo nawiazane wybieramy baze danych, z ktorej korzysta strona */ $wynik = mysql_select_db($sql_baza); if($wynik) { /* narzucamy odpowiednie kodowanie dla clienta i polaczenia */ mysql_query('SET character_set_connection=latin2'); mysql_query('SET character_set_client=latin2'); mysql_query('SET character_set_results=latin2'); } } ?> |
Po zapisaniu tych dwóch plików i wrzuceniu na serwer nasze marki samochodów powinni się wyświetlać, więc teraz czas na zrobienie dynamicznego generowania modeli. W kodzie selecta jest odwołanie do funkcji ajaxFunction(), dlatego teraz zajmiemy się nią. Na początku w sekcji musimy dodać plik Javascriptu:
1 2 3 4 5 |
Plik, który musimy stworzyć to ajax.js, jego struktura prezentuje się następująco:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | function ajaxFunction(){ var ajaxRequest; try{ ajaxRequest = new XMLHttpRequest(); } catch (e){ try{ ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ alert("Your browser broke!"); return false; } } } ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){ var ajaxDisplay = document.getElementById('ajaxDiv'); ajaxDisplay.innerHTML = ajaxRequest.responseText; } } var mid = document.getElementById('mid').value; var queryString = "?mid=" + mid; ajaxRequest.open("GET", "modele.php" + queryString, true); ajaxRequest.send(null); } |
W linijkach 4-17 jest tzw. przechwytywanie wyjątków, które wyświetli odpowiedni komunikat jeżeli przeglądarka nie będzie w stanie wykonać skryptu. Kolejne linijki odpowiadają za przechwycenie wartości wybranego pierwszego selecta i wygenerowanie nowego, który znajduje się w pliku modele.php. Skrypt ten pobiera id wybranej marki samochodu za pomocą parametru $_GET[‚mid’]. W związku z tym najpierw w naszym pliku samochodu.php zmienimy kod drugiego selecta na:
W sekcji ajaxDiv po wybraniu marki samochodu pojawią się do wyboru jej modele, ale najpierw musimy stworzyć odpowiedni plik modele.php:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <?php $mid = $_GET['mid']; if(!empty($mid)) { include("config.php"); $dropdown = "<select name="model" id="model" width="25">"; $dropdown .= "<option value="">--wybierz--</option>"; $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']; $dropdown .= "<option value="".$id."">".$model."</option>"; } $dropdown .= "</select><br>"; echo $dropdown; } ?> |
Jeszcze na wszelki wypadek kod pliku samochody.php:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <title>Prosta strona HTML</title> <script language="javascript" type="text/javascript" src="ajax.js"></script> </head> <body> <form> <table width="300" border="0"> <tr> <td width="200"> <?php include("config.php"); echo "<select name="mid" onchange="ajaxFunction()" id="mid" width="25">" ."<option value="">--wybierz--</option>"; $result2 = mysql_query("SELECT id, marka FROM marki ORDER BY marka"); while ($row = mysql_fetch_array($result2)) { $mid = intval($row['id']); $marka = $row['marka']; echo"<option value="".$mid."">".$marka."</option>"; } echo"</select><br>"; ?> </td> <td width="100"> <div id='ajaxDiv'></div> </td> </tr> </table> </form> </body> </html> |
W taki oto sposób udało się wykonać nam dynamicznego selecta 😉 Mam nadzieję, że nigdzie nie popełniłem błędu, bo miejscami pisałem z głowy.
podany skrypt nie działa