Keskustelu: Nettisivujen teko: Javascript valikko ongelma?

Tarkoituksena olisi tehdä kaksi vetovalikkoa, joista jälkimmäisen sisältö riippuu ensimmäisestä valinnasta. Eli jos, vaikka ekassa valikossa olisi vaihtoehdot: Auto, Polkupyörä ja Lentokone. Niin jälkimmäiseen tulisi auton tapauksessa Audi, BMW ja Mersu, kun taas polkupyörän tapauksessa: Tunturi, Helkama. Ja lentokone tapauksessa: Boeing ja Airbus. Toi nyt oli vain esimerkki, mutta ideana tuo. Ja tämä päivitys tulisi tehdä heti kun on valittu joku noista ensimmäisistä.

Käsitteekseni tuo pitäisi tehdä onchange-komentoa hyväksi käyttäen, mutta vaatii myös Javascriptiä. Eli ilmeisesti siihen pitäisi tehdä joku oma funktio tuolle. Tämä on osana html sivua ja siinä olevaa lomaketta. Lomake hakee tietoja tietokannasta ASP:n avulla. Mutta ongelma on tuossa yllä olevassa esimerkissä. Kun tuo Javascript ei oikein käänny, niin voisiko joku auttaa ja kertoa, että minkälaista funktioota tuohon tulisi tehdä ja miten liittää se tuohon valikkoon?

Seuraavassa viritelmä, jota itse olen käyttänyt. Eli haet ne tiedot tietokannasta ja tallennat ne javascript-taulukkoon seuraavasti:

listaTaulu[auton_id] = array("Audi", audin_id, "BMW", bmwn_id, "Mersu", mersun_id);
listaTaulu[polkupyoran_id] = array("Tunturi", tunturin_id, "Helkama", helkaman_id);
listaTaulu[lentokoneen_id] = array("Boeing", boeingin_id, "Airbus", airbusin_id);

Ja niin edelleen. Sitten html-sivulla haet tuohon ykkösvalikkoon nuo tiedot (auto, polkupyörä, lentokone) ja niiden id:t, jotka ovat samat kuin tuossa listaTaulu-arrayssa. Seuraavassa sitten itse toi populate-funktio, joka suorittaat toisen pudotusvalikon täytön. Ja tuo lienee parasta laittaa juurikin siihen onchange-eventtiin. Tuossa esimerkissä ensimmäisen pudotusvalikon id:n tulee olla "ekaValikko" ja toisen "tokaValikko".

function populate() {

    var box     = document.getElementById('ekaValikko'); // ensimmäinen pudotusvalikko
    var number  = box.options[box.selectedIndex].value; // haetaan pudotusvalikon nykyinen arvo

    if(!number)
        return; // jos ei onnistunut

    var list    = listaTaulu[number]; // haetaan listan arvon perusteella listaTaulu-arraysta kyseisen valinnan "mukainen" array
    var box2    = document.getElementById('tokaValikko'); // toinen pudotusvalikko

    box2.options.length = 0; // tyhjennetään toinen pudotusvalikko

    // täytetään toinen pudotusvalikko nimi-arvo - pareilla

    for(i=0;i<list.length;i+=2) {
        box2.options[i/2] = new Option(list[i],list[i+1]);
    } // for

} // funktio

Kiitoksia vaan tuosta. Taisin kirjoittaa tuon ensimmäisen viestin hiukan huonosti, koska tuo valikko on itselläni alla olevassa muodossa ja en hae arvoja tietokannasta suoraan vaan kirjoitan ne itse:

        <select  class="input1" NAME="Kulkuneuvo">
			<option VALUE="1">Auto
			<option VALUE="2">Polkupyörä
			<option VALUE="3">Lentokone
	</select>

Ja tuo toinen valikko samalla tavalla, mutta siihen pitäisi saada se että se valikoi näytettävät arvot tuon ensimmäisen valikon mukaan. Ja siihenhän tarvitaan se javascript funktio onchange-komennon kanssa.

Juurihan noin tuo esimerkkini toimii. Samahan se on miten ne arvot tuohon ensimmäiseen pudotusvalikkoon laitat :) Mitä kohtaa et tuosta oikein ymmärtänyt?

Se, mikä jää minulle hämärän peittoon, on tuo funktion liittäminen tuohon vetovalikkoon ja miten minun tulee kirjoittaa se jälkimmäinen vetovalikko. Ensimmäinen on tuossa muodossa kuten, sen kirjoitin tuohon ylemmäs. Siihen tosin täytyy lisätä se onchange-komento.

Funktiosta kiitos. Sen toiminta käy hyvin ilmi tuosta koodista!

No kokeillaas pistää pikainen esimerkki.

<formi>

    <select name='kulkuneuvo' id='kulkuneuvo' onchange='populate();'>
        <option value='1'>Auto</option>
        <option value='2'>Polkupyörä</option>
        <option value='3'>Lentokone</option>
    </select>

    <select name='merkit' id='merkit>
        <option>Valitse ensin kulkuneuvo</option>
    </select>

</formi>

<script type='text/javascript'>
<!--

listaTaulu[1] = array("Audi", audin_id, "BMW", bmwn_id, "Mersu", mersun_id);
listaTaulu[2] = array("Tunturi", tunturin_id, "Helkama", helkaman_id);
listaTaulu[3] = array("Boeing", boeingin_id, "Airbus", airbusin_id);

function populate() {

    var box     = document.getElementById('kulkuneuvo'); // ensimmäinen pudotusvalikko
    var number  = box.options[box.selectedIndex].value; // haetaan pudotusvalikon nykyinen arvo

    if(!number)
        return; // jos ei onnistunut

    var list    = listaTaulu[number]; // haetaan listan arvon perusteella listaTaulu-arraysta kyseisen valinnan "mukainen" array
    var box2    = document.getElementById('merkit'); // toinen pudotusvalikko

    box2.options.length = 0; // tyhjennetään toinen pudotusvalikko

    // täytetään toinen pudotusvalikko nimi-arvo - pareilla

    for(i=0;i<list.length;i+=2) {
        box2.options[i/2] = new Option(list[i],list[i+1]);
    } // for

} // funktio

-->
</script>

Sisältänee lukuisia virheitä, mutta toivottavasti saat tuosta jo paremman kuvan :) Ja luonnollisesti tuohon listaTaulu-taulukkoon tulee laittaa noiden id-tekstien (esim. audin_id) sijaan ne oikeat id-numerot, jotka tulevat sitten pudotusvalikkoon vaihtoehtojen arvoiksi (value).