Moi,
miten pitäisi toteuttaa sellainen dynaaminen toiminta, että on kaksi alasvetovalikkoa, jossa 1. tietoa tietokannasta ja 2. alasvetovalikko on ensiksi tyhjä. Sitten kun käyttäjä valitsee ensimmäisestä menusta jotain, niin kakkosmenuun pitäisi ilmestyä tietoa. kuten seuraavassa
Maat
-Suomi
-Ruotsi
-Tanska
Kaupungit (suomi)
-Helsinki
-Turku
-Tampere
Olen tehnyt ensimmäisen menun toteutuksen php:llä ja ymmärrän, että jotenkin pitäisi saada reloadutta tuo koko nettisivu uudestaan antaen syötteeksi menussa tehty valinta.
<SELECT NAME="Maat" onChange="reload(this.form)">
Kutsutaanko tuolla onChange:llä jotain Java-scriptiä joka sitten tekee mitä?
Eiks sen vois toteuttaa niin, että eka näkys vaan eka valintaboksi ja ku siitä valitsee ja submitoi sen formin ni tulee seuraava boksi. Sillon vois vaikka pistää selectin onChangeen sitten javascript:submit(this.form) vai mitenkäs se meni ja jos ei oo javascriptiä ni submit-nappi viereen
Prototypejs.org:sta löytyy hyvä ajax-kirjasto. Voit rakentaa alasvetovalikon joko dynaamisesti tai nimetä erilliset html-sivut tietynmukaisesti (esim. citiesSuomi.html, citiesRuotsi.html tms.), jotta se ladataan kun tietty maa valitaan.
Erillistä sivun "vaihtumista" (ts. sivun kokonaan lataamista) ei näin ollen tarvita, vaan sisältö ladataan haluamaasi lohkoon. Ja käyttäjän ei tarvitse palata selaimellaan takaisin, jos valitsi väärään maan.
Löysin jo tavan miten pääsen javascriptillä muuttamaan tuon toisen alasvetovalikon sisältöä, kun ykkösestä valitsee jonkun. Tässä on vain se ongelma, että kakkosvalikon sisältö vaatisi php:llä tehtävää tietokantakyselyä, mutta jos lyön nyt tuon kakkos alasvetovalikon php-tagien sisälle <?php ?>, niin homma ei enää toimi. Eli, ykkös alasvetovalikokko on php tagien välissä jossa tehdään sen sisällölle tietokantakysely. Tästä tulee alasvetolista, jonka valinnasta pitäisi saada annettua toisen alasvetovalikon luonnille parametri, eli tieto siitä mikä ensimmäisessä valittiin. Pitäisi laittaa molempien luonti saman php-tagien sisälle ja antaa parametriksi tälle tuo ensimmäisen alasvetovalikon valinta, joka ensimmäisellä kerralla tai ilman valintaa on ""? Eikö tässä ole nyt se ongelma, että php ajatetaan serveripäässä ja taas java selaimessa, joten jos muutan jonkun parametrin arvoa javascriptillä, niin se ei näy enää tuossa php-scriptissä. Miten saisin toteutettua niin, että pystyn antamaan jonkun parametrin php:lle jälkikäteen ja saan reloadattua sivun...? Tässä tuo yksinkertainen java-script kutsu ja scripti:
onchange="setOptions(document.MyForm.SelectedValue.options [document.MyForm.SelectedValue.selectedIndex].value);">
<SCRIPT language=JavaScript>
function setOptions(chosen) {
var selbox = document.MyForm.opttwo;
selbox.options.length = 0;
if (chosen == "--") {
selbox.options[selbox.options.length] = new Option('--',' ');
}
else{
selbox.options[selbox.options.length] = new Option(chosen);
}
}
</script>Ei tuu heti mieleen miten paremmin tekisi.. Tietenkin niin, että ylempään valikkoon jäisi maan nimi, minkä valitsee.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="PSPad editor, www.pspad.com"> <title></title> </head> <body> <form name="vaihda" method="post" action="sivunnimi.php"> <?php if(empty($_REQUEST['maa'])) $_REQUEST['maa'] = 1; echo '<b>Valitse maa:<br/></b>'; echo '<select name="maa" onChange="this.form.submit();">'; echo '<option value="0">Valitse maa</option>'; echo '<option value="1">Suomi</option>'; echo '<option value="2">Ruotsi</option>'; echo '</select>'; echo '<br/>'; if ($_REQUEST['maa'] == 1) { echo '</br>'; echo '<select>'; echo '<option>Helsinki</option>'; echo '</select>'; } else if ($_REQUEST['maa'] == 2) { echo '</br>'; echo '<select>'; echo '<option>Kööpenhamina</option>'; echo '</select>'; } ?> </form> </body> </html>
^ Miten tuo ylläoleva toimisi, koska senhän pitäisi olla omassa .php tiedostossaan jota sitten kutsuttaisiin? Miten saan samaan lomakkeeseen useita alasvetovalikkoja joissa on dynaamisia riippuvuuksia ja joissa alemman valikon sisältö riippuu ylemmästä valinnasta. Tuo minun sivuni on saman <FORM> sisällä ja siitä lähtee kutsu taas uuteen php.scriptiin joka sisältää käyttäjän tekemät valinnat, joten toiminta ei voi olla minusta hajautettu, vaan ne pitää saada tuon saman osion sisälle. Rakenne pääpiirteissään:
<FORM METHOD="POST" ACTION="addDelete.php" NAME="MyForm"> <p>Select Country:<BR> // Valinta tässä... <SELECT NAME="countrySelect"> <?php echo "<OPTION>--"; $xml = simplexml_load_file('countryNames.xml'); $result = $xml->xpath('subsystem'); while(list( , $node) = each($result)) { echo "</br>"; echo "<OPTION>"; echo ((string) $node['name']),"\n"; } ?> </SELECT></p> // ...pitäisi näkyä tässä alemassa valikossa <p>Select City:<BR> <SELECT NAME="citySelect"> <?php ....???? ?> </SELECT></p> <p>Action<BR> <SELECT NAME="Action"> <OPTION>Add <OPTION>Remove </SELECT></p> <P> <INPUT TYPE="submit" VALUE="Send"> <INPUT TYPE="reset" VALUE="Reset"> </p> </FORM>
Mä tekisin sen edelleen sillä prototypellä...
Niinku näin:
http://www.terolepisto.net/games/ajaxmenu/
Lebe80 kirjoitti:
Mä tekisin sen edelleen sillä prototypellä...
Niinku näin:
http://www.terolepisto.net/games/ajaxmenu/
Kallistuisin tuota katsottuani itse ihan samaan vaihtoehtoon
Löysin ratkaisun ongelmaan joka menee seuraavasti:
// Selecting sisällä kutsutaan resubmit() java methodia...
<SELECT NAME="Country" onchange="resubmit()">
//joka tekee seuraavan
<script language="JavaScript">
function resubmit(){
document.MyForm.action="lomake.php";
document.MyForm.submit();
}
</script>
//Tämä jälkeen Country arvo on käytettävissä ja seuraava <SELECT> voi kutsua:
<SELECT NAME="Maa">
<?php
if ($_REQUEST['Country'] == "XXXX"){
...jne
}
?>Jos haluaa lisäksi, että Country alasvetovalikossa säilyy tuo valinta päivityksen jälkeen, niin luotaessa sille sisältöä tarkistetaan onko kyseinen OPTION sama kuin talletettu ja laitetaan: <OPTION SELECTED>
Aihe on jo aika vanha, joten et voi enää vastata siihen.