javascript - Dynamisk select - 2 muligheder - Udvikleren.dk

Tags: javascript

<< < 1 2 > >>

Bruger #14031 @ 25.07.08 21:37

Hej

Jeg mangler et dynamic select script med 2 muligheder eks.

Boks 1 hedder: Postnummer
Boks 2 hedder: Landsdel
Boks 3 hedder: Byer

Når man loader siden skal alle byer være listet op i boks 3, vælger man så enten postnummer, eller landsdel, skal den vælge byerne indenfor en af de områder.

Kan man ikke gøre sådan, at man udskriver en lang liste med det hele

forklaring:
by[1] = new Array( "id", "postnummer", "landsdel", "by"); -

eks:
by[1] = new Array( "1", "1000", "Sjælland", "København");
by[2] = new Array( "2", "5000", "Fyn", "Odense");
by[3] = new Array( "3", "6000", "Sønderjylland", "Fredericia");
by[4] = new Array( "4", "9000", "Nordjylland", "Ålborg");

dette er bare et eksempel - postnr. passer ikke med byerne - men alle byerne vil jeg taste ind i en database - så vil det være nemmest at genere sådan en list med et array, vil det ikk?

By navnet skal stå i boks 3 - men valueèn skal være idèt

Håber i forstår ellers spørg

En der kender et scipt der ligner dette?

16 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 5 karma

Sorter efter stemmer Sorter efter dato

Bruger #14031 @ 29.07.08 17:53

I databasen kommer der en række der hedder id, postnummer, by, landsdel i en tabel.

Værdien i select boksen skal være idét, når man vil åben det fra siden den går over på via en post.

Bruger #11328 @ 29.07.08 19:58

1.323

Gider ikke at klare PHP'en, men her er javascriptet:

Kode

<html>
    <head>
        <title>JavaScript by-select</title>
        <script type="text/javascript">
            function init()
            {
                // byArray[0] = id; byArray[1] = navn; byArray[2] = bynavn; byArray[3] = postnummer; byArray[4] = landsdel
                byArray = new Array(Array(0, "Herlev", 2730, "sjaelland"), Array(1, "Søborg", 2860, "sjaelland"), Array(2, "Something", 2620, "fyn"));
                tempArray = new Array();

                updateList(byArray);
            }

            function updatePost(postSelId)
            {
                tempArray = new Array();

                var postSelect = document.getElementById(postSelId);
                var x = postSelect.selectedIndex;
                var postnummer = postSelect.options[x].value;

                for(var i = 0; i < byArray.length; i++)
                {
                    var info = byArray[i][2];
                    if(info == postnummer)
                    {
                        tempArray[tempArray.length] = byArray[i];
                    }
                }

                updateList(tempArray);
            }

            function updateLand(landSelId)
            {
                tempArray = Array();

                var landSelect = document.getElementById(landSelId);
                var x = landSelect.selectedIndex;
                var landsdel = landSelect.options[x].value;

                for(var i = 0; i < byArray.length; i++)
                {

                    if(byArray[i][3] == landsdel)
                    {

                        tempArray[tempArray.length] = byArray[i];
                    }
                }

                updateList(tempArray);
            }

            function updateList(listArray)
            {
                document.getElementById("byer").innerHTML = "";
                for(var i = 0; i < listArray.length; i++)
                {
                    var docfrag=document.createDocumentFragment();
                    var option=document.createElement("option");
                    var optionText=document.createTextNode(listArray[i][1]);
                    var attValue = option.setAttribute("value", listArray[i][0]);
                    option.appendChild(optionText);
                    docfrag.appendChild(option);
                    document.getElementById("byer").appendChild(docfrag);
                }

            }
        </script>
    </head>
    <body onload="init()">
        <form>
            <select id="postnummer" onchange="updatePost(this.id)">
                <option value="2860">2860</option>
                <option value="2730">2730</option>
                <option value="2620">2620</option>
            </select>
            <span>Eller</span>
            <select id="landsdel" onchange="updateLand(this.id)">
                <option value="sjaelland">Sjælland</option>
                <option value="fyn">Fyn</option>
                <option value="sonderjylland">Sønderjylland</option>
                <option value="nordjylland">Nordjylland</option>
            </select>
            <p>Byer: </p>
            <select id="byer" size="5">
            </select>
        </form>
    </body>
</html>