Tarvitsisin sellaisen toiminnon, jossa sivulla on ensiksi yksi pudotusvalikko. Siitä pudostuvalikosta kun valitsee yhden valinnan niin viereen tulee toinen pudotusvalikko. Molemmat pudotusvalikot tarvitsee olla ennalta määritelty.
Esimerkki:
Ensimmäisestä pudotusvalikosta valitaan kohta Suomi ja sitten paljastuu pudotusvalikko Suomen kaupungeista.
Pudotusvalikko 1:ssä voi olla useampi valinta (ja niistä kaikista paljastuu pudostusvalikon 1 vaihtoehtoon liittyvä pudotusvalikko).
Pudotusvalikko 1: Pudotusvalikko2:
Suomi --> Helsinki
Toteuta se ajaxilla.
Jokunen vuosi sitten tuota kyseltiin melko usein, joten tein nopean esimerkin:
http://games.terolepisto.net/ajaxmenu/
Tuo on tehty MooTools-kirjastolla, mutta suosittelen tutustumaan jQuery-kirjastoon, joka soveltuu tämmöiseen paljon paremmin.
Vai kumminkin Prototype-kirjastolla?;) Kuriositeetti: vaatii keksien hyväksymisen.
Idea on varsin yksinkertainen. Siksi se tuleekin toteuttaa niin, että toimii myös silloin, kun selain ei syystä tai toisesta suorita Javascript-komentosarjoja (tällöin molempien pudotusvalikkojen yhteyteen tulee laittaa nappi, jolla käyttäjä lähettää valintansa serverille (joka) valinnan jälkeen).
Hyvä idea on toteuttaa aluksi tämä "fallback"-vaihtoehto - ja sen jälkeen Javascriptiä suorittaessa korvata tämä valikko edistyneemmällä. Jos tämä kuulostaa turhan monimutkaiselta, jätä jälkimmäinen vaihe tekemättä.
En sannut tuota Ajax:lla toimivaa toimimaan. Vaikka pudotusvalikosta valitsee minkä tahansa vaihtoehdon niin mitään ei tapahdu.
Voiko tuota toteuttaa mitenkään muuten?
Löytyykö jostain internetistä vastaava koodi?
Olen itse yrittänyt löytää jo monta päivää.
tsuriga kirjoitti:
Vai kumminkin Prototype-kirjastolla?;) Kuriositeetti: vaatii keksien hyväksymisen.
Haha! Oikein! Kirjoitin tuon viestin puhelimella, joten en oikein pystynyt tarkistaa oman sivuston koodiani. Prototypejs-ajaltanihan tuo tosiaan olikin :)
combo kirjoitti:
Lötyykö jostain internetistä vastaava koodi?
Olen itse yrittänyt löytää jo monta päivää.
Hyvin todennäköisesti löytyy, mutta tärkeämpää olisi, että siirryt vaikkapa jQueryn -sivustolle ja tutkailet miten saadaan kaapattua alasvetovalikon muutoksen "tapahtuma". Tähän taas liität toimintoja, joissa tarkistat mikä arvo alasvetovalikossa tällöin on, ja annat komennon jQuery-kirjastolle ladata ajaxilla alueeseen #XXXXX sivun alasvetovalikko.php sisällön alasvetovalikon arvolla.
lainaus:
Löytyykö jostain internetistä vastaava koodi?
Nyt löytyy!
Sivun <head>-osaan tulee JavaScriptiä jQuery-kirjastolla:
<!-- jQuery; muista ladata se palvelimellesi tai muuta osoite oikeaksi! -->
<script type="text/javascript" src="jquery.js"></script>
<!-- Oma koodi: -->
<script type="text/javascript">
/* <![CDATA[ <!-- */
/* Hakufunktio: ladataan #kaupunki-elementtiin dataa, GET-parametrina valittu maa. */
function kaupunkihaku() {
$("#kaupunki").load("kaupunkihaku.php?" + $("#maa select").serialize());
}
/* Sivun latautuessa asetetaan onchange-käsittelijä ja ladataan ensimmäisen kerran. */
$(function() {
$("#maa select").change(kaupunkihaku);
kaupunkihaku();
});
/* --> ]]> */
</script>Lomakkeeseen laitetaan maalle valmiiksi täytetty select-laatikko ja kaupungille input-laatikko, jotta JS:n pettäessä käyttäjä voi kirjoittaa kaupungin nimen itse.
<span id="maa">
<select name="maa">
<option value="FI">Suomi</option>
<option value="SE">Ruotsi</option>
</select>
</span>
<span id="kaupunki">
<input type="text" name="kaupunki" />
</span>Tiedostoon kaupunkihaku.php tulee koodi, joka palauttaa oikeat kaupungit:
<?php // Tietokanta $kaupungit = array( "FI" => array("Helsinki", "Turku", "Tampere", "Kuopio", "Oulu"), "SE" => array("Tukholma", "Göteborg", "Malmö"), ); // Tarkistetaan, että maa löytyy; jos ei löydy, tulostetaan vain vapaa input-laatikko. $maa = @$_GET["maa"]; if (empty($kaupungit[$maa])) { die("<input type='text' name='kaupunki' />"); } // Tulostetaan select-tagi ja sen sisään option-tagit. echo "<select name='kaupunki'>"; foreach ($kaupungit[$maa] as $kaupunki) { echo "<option>", htmlspecialchars($kaupunki), "</option>"; } echo "</select>";
Kiitos paljon!
Unohdin kysyä äsken että onko tuohon pudotusvalikon valinnasta ilmestyvän pudotusvalikon viereen mahdollista lisätä normaaleja tekstikenttiä riippuen 1. pudotusvalikon valinnasta?
Näissä kentissä tarvitsisi toimia toinen JS -koodi.
On mahdollista, sillä Metabolixin koodi tekee vain sen, että kun alasvetovalikosta valitsee maan, niin ajax-kirjastolla haetaan kaupunkihaku.php:n tulostama html-sisältö haluttuun alueeseen. Tuo kaupunkihaku.php voi sisältää "ihan mitä tahansa".
Kuten huomaat, esimerkki jo nyt näyttää yhden maan valintana tekstikentän, mutta se voisi ihan yhtähyvin sisältää vaikkapa kuvan, tai vaikkapa kahdeksan rastituskenttää, useamman alasvetovalikon ja linkin vaikkapa pdf-tiedostoon.
Sisältöä ei ole siis rajattu mitenkään.
Miten siihen kaupunkihaku.php:n saa niin tehtyä kenttiä lisää että kentät vaihtelevat pudotusvalikon valinnan mukaan?
Näissä kentissä tarvitsee toimia javascript eräatä toista ominaisuutta varten.
No teet, että se tulostaa eri juttuja php:lla.
Ei tohon nyt oikein voi muuta sanoa. Sä voit tehdä sen useammalla eri tavalla.
Paras varmaan olisi, että itse opettelisit, niin osaisit sitten tarvittaessa muuttaakin sitä.
Aihe on jo aika vanha, joten et voi enää vastata siihen.