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 #11328 @ 29.07.08 21:00

1.323

HTML 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;
 
                 if(postnummer == "")
                 {
                     updateList(byArray);
                     return 0;
                 }
 
                 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;
                 
                 if(landsdel == "")
                 {
                     updateList(byArray);
                     return 0;
                 }
 
                 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="">Alle</option>
                 <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="">Alle</option>
                 <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>

Bruger #11328 @ 28.07.08 01:54

1.323

Sådan! Nu har jeg brugt ca. 1 time på det her, så det har bare at være godt nok!
Koden er testet, og burde meget gerne vide!
Håber du selv kender lidt til PHP og MySQL, ellers skal jeg også nok forklare det.
Men anyways her er eksemplet:

Kode

<html>
    <head>
        <title>JavaScript by-select</title>
        <script type="text/javascript">
            function init()
            {
                byArray = new Array(Array("herlev", "Herlev", 2730, "sjaelland"), Array("soborg", "Søborg", 2860, "sjaelland"), Array("something", "Something", 2620, "fyn"));
                tempArray = new Array();
            }

            function updatePost(postSelId)
            {
                tempArray = 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++)
                {
                    document.getElementById("byer").innerHTML += "<option value=\""+i+"\">"+listArray[i][1]+"</option>";
                }

            }
        </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">
                <option value="0">Herlev</option>
                <option value="1">Søborg</option>
                <option value="2">Something</option>
            </select>
        </form>
    </body>
</html>

Bruger #14031 @ 28.07.08 22:12

Det virker desværre ikke

Den reagere ikke når man trykker på på noget.

Desuden når man åbner scriptet skal den loade alle array'sne ind i by boksen, med id, som value.

Bruger #11328 @ 29.07.08 02:10

1.323

Du kan tro at den reagere!!
Prøv selv at gå herind: http://w3schools.com/html/tryit.asp?filename=tryhtml_basic og Copy/Paste koden.
Hvis det er fordi du ikke forstår den, så bed om en forklaring istedet for. Og hvis det er fodi du har ændret i det, og det ikke virker har du STADIG ikke forstået koden. Bed derfor om hjælp, hvis det er det...

Bruger #14031 @ 29.07.08 02:31

Ja, den virker i Firefox, men ikke i IE 7 - hvilket den også skulle kunne

Desuden kan man ikke trække data fra array'sne i by select boksen - for det kræver mere trafik, at den skal loade 2 gange, desuden skal der tilføjes id i value i by boksen og i array'sne ..

Men ellers godt arbejde, dog med et par små fejl

Bruger #11328 @ 29.07.08 03:07

1.323

Sådan opdateret kode: Virker i både IE og FF

Kode

<html>
    <head>
        <title>JavaScript by-select</title>
        <script type="text/javascript">
            function init()
            {
                byArray = new Array(Array("herlev", "Herlev", 2730, "sjaelland"), Array("soborg", "Søborg", 2860, "sjaelland"), Array("something", "Something", 2620, "fyn"));
                tempArray = new Array();
            }

            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])
                    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">
                <option value="0">Herlev</option>
                <option value="1">Søborg</option>
                <option value="2">Something</option>
            </select>
        </form>
    </body>
</html>

Du må lige forklare hvad du mener med: "Desuden kan man ikke trække data fra array'sne i by select boksen - for det kræver mere trafik, at den skal loade 2 gange, desuden skal der tilføjes id i value i by boksen og i array'sne ."

Bruger #14031 @ 29.07.08 05:07

Hvis vi nu tager byer, så starder de sådan her:

<select id="byer" size="5">
<option value="0">Herlev</option>
<option value="1">Søborg</option>
<option value="2">Something</option>
</select>

Istedet for at indsætte dataene sådan, skal man lave en onload funktion, som trækker alle byerne fra arraysne ind og så skal valuen i select boksen være et id, som står i array'et.

byArray = new Array(
Array("herlev", "Herlev", 2730, "sjaelland"), Array("soborg", "Søborg", 2860, "sjaelland"), Array("something", "Something", 2620, "fyn"));
tempArray = new Array();

Et array skal være sådan her:
Array("id", "by", postnummer, "landsdel"),

og så når man loader skal alle disse byer trækkes ind i "byer" boksen, hvor value'en eller værdien skal være idét og så skal byen stå der, for så skal det hele loades engang det sparer vel trafik/belastning på serveren, der er trods alt 1700 byer

Det ville også være fint hvis man kunne lave en Alle i postnr og by, så man kan se alle byerne igen.

Håber det var forklaring nok, ellers spørg

Jeg er ikke ret god til javascript er bedre til php, men tak fordi du gider bruge tiden på det

Indlæg senest redigeret d. 29.07.2008 05:32 af Bruger #14031

Bruger #11328 @ 29.07.08 15:55

1.323

OK onload function on it's way!...

Øhm må jeg foreslå at et array ser sådan her ud:
Array("id","by","bynavn","postnummer","landsdel")
Da det er svært at sammeligne bogstaver som æ, ø og å. Og vi har jo riemlig mange byer i DK med de bogstaver inkluderet i deres bynavn...

Bruger #14031 @ 29.07.08 16:07

Hvad mener du? By navnene skal jo kun vises - det er id'et som er værdiet der skal trækkes ud af formen

Bruger #11328 @ 29.07.08 17:05

1.323

Deler du byer, postnummre og landsdele i hver sin table?

<< < 1 2 > >>

Dynamisk select - 2 muligheder

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler