---
title: "Dynamisk drop down (select) i formulär"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/94717-dynamisk-drop-down-select-i-formulär"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "danieleinad"
published: "2004-01-13T16:06:46.000Z"
updated: "2004-01-13T19:56:44.000Z"
replies: 9
views: 283
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/94717-dynamisk-drop-down-select-i-formulär"
---

# Dynamisk drop down (select) i formulär

## #1 — danieleinad, 2004-01-13T16:06Z

Jag kan nästan ingen javascript men har hittat
ett gratisscript som jag försöker få ordning på.
Egentligen ska varje arraygrupp börja om på noll,
dvs t ex gul skulle vara Arrej\[1\]\[0\]="Gul";
men jag vill ha det på detta löpande vis.
Problemet är att när den nya drop down-menyn (select)
skapas, skapas även ett antal tomma vita rader ovanför,
om jag t ex väljer färg i första menyn kommer tomma
vita rader för de tre frukterna också skapas,
hur kan jag få rätsida på detta?

Dessutom, går det att koppla en SELECTED-funktion till
detta, om t ex variabelerna huvud och sedan kommer med
värdena 3 resp 6 (alt endast att $sedan är 6), hur kan
jag då få "Bil" valt?

\<FORM NAME="val"\>

\<SELECT NAME="huvud" OnChange="SkapaVal(this.selectedIndex);"\>
\<OPTION VALUE="1"\>Frukt\</OPTION\>
\<OPTION VALUE="2"\>Färg\</OPTION\>
\<OPTION VALUE="3"\>Färdmedel\</OPTION\>
\</SELECT\>
\<SELECT NAME=\\"sedan\\"\>
\<OPTION VALUE=\\"\\"\>Välj ovan först\</OPTION\>
\</SELECT\>
\</FORM\>

\<SCRIPT Language="JavaScript"\>\<!--

Arrej=new Array(3);
Arrej\[0\]=new Array(3);
Arrej\[1\]=new Array(2);
Arrej\[2\]=new Array(4);

Arrej\[0\]\[0\]="Banan";
Arrej\[0\]\[1\]="Apelsin";
Arrej\[0\]\[2\]="Melon";

Arrej\[1\]\[3\]="Gul";
Arrej\[1\]\[4\]="vit";

Arrej\[2\]\[5\]="Cykel";
Arrej\[2\]\[6\]="Bil";
Arrej\[2\]\[7\]="Buss";
Arrej\[2\]\[8\]="Tunnelbana";

function SkapaVal(num)
{

document.val.sedan.selectedIndex=1;

for(ctr=0;ctr\<Arrej\[num\].length;ctr++)
{
document.val.sedan.options\[ctr\]=new Option(Arrej\[num\]\[ctr\],\[ctr\]);
}

document.val.sedan.length=Arrej\[num\].length;
}
//--\>\</Script\>

Några synpunkter på scriptet i övrigt, kan det snyggas
till och snabbas upp?

Tusen tack på förhand!

MVH Daniel

Permalänk: https://www.webforum.nu/p/94717

## #2 — dectgap, 2004-01-13T16:25Z

Så här?

```
<FORM NAME="val">

<SELECT NAME="huvud" OnChange="SkapaVal(this.selectedIndex);">
<OPTION VALUE="1">Frukt</OPTION>
<OPTION VALUE="2">Färg</OPTION>
<OPTION VALUE="3">Färdmedel</OPTION>
</SELECT>
<SELECT NAME="sedan">
<OPTION VALUE="">Välj ovan först</OPTION>
</SELECT>
</FORM>

<SCRIPT Language="JavaScript"><!--

Arrej=new Array(3);
Arrej[0]=new Array(3);
Arrej[1]=new Array(2);
Arrej[2]=new Array(4);

Arrej[0][0]="Banan";
Arrej[0][1]="Apelsin";
Arrej[0][2]="Melon";

Arrej[1][0]="Gul";
Arrej[1][1]="vit";

Arrej[2][0]="Cykel";
Arrej[2][1]="Bil";
Arrej[2][2]="Buss";
Arrej[2][3]="Tunnelbana";

function SkapaVal(num)
{

document.val.sedan.options.length = Arrej[num].length;

for(ctr=0;ctr<Arrej[num].length;ctr++)
{
document.val.sedan.options[ctr]=new Option(Arrej[num][ctr],[ctr]);
}

document.val.sedan.selectedIndex=0;
}
//--></Script>
```

Permalänk: https://www.webforum.nu/p/1248535

## #3 — danieleinad, 2004-01-13T16:42Z

Tack för den snabba hjälpen, men på detta sättet blir
ju värdena i sedan-valet inte löpande, vilket jag önskar.
Kan man kanske lägga till en tredje nivå i arrayen som
innehåller värdet?

MVH Daniel

Permalänk: https://www.webforum.nu/p/1248546

## #4 — dectgap, 2004-01-13T16:49Z

För att ta emot sedans värde på nästa sida kan du ändra funktionen till:

```
function SkapaVal(num)
{

document.val.sedan.options.length = Arrej[num].length;

for(ctr=0;ctr<Arrej[num].length;ctr++)
{
document.val.sedan.options[ctr]=new Option(Arrej[num][ctr],Arrej[num][ctr]);
}

document.val.sedan.selectedIndex=0;
}
```

Hur menar du att den andra rullgardinsmenyn ska vara löpande? Ska den fyllas på med nya värden ifall ett nytt val görs i "huvud"? Vad ska i så fall hända om man väljer "Färg", "Frukt" och sedan "Färg" igen?

Permalänk: https://www.webforum.nu/p/1248549

## #5 — danieleinad, 2004-01-13T16:57Z

Som jag har förstått det är det t ex 2:an i 
Arrej\[0\]\[2\]="Melon";
som är värdet på "sedan" (select-menyn),
dvs värdet är inte "Melon".
Men jag kanske har förstått fel, om jag vill
att värdet ska vara "2" kanske man måste
lägga till något mer?

Permalänk: https://www.webforum.nu/p/1248552

## #6 — dectgap, 2004-01-13T17:19Z

Vilket värde ett alternativ ska ha anger du här:

```
new Option(x,y)
```

*x* är den text som ska stå i menyn och *y* är värdet på alternativet.
<http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/option.html>
Jämför hur du hade skrivit det i funktionen med hur jag skrev det i senaste inlägget.

Permalänk: https://www.webforum.nu/p/1248572

## #7 — danieleinad, 2004-01-13T17:26Z

Så som koden är nu kommer värdet på "sedan" att vara
t ex "Melon", och inte någon siffra. Kan jag lägga till ännu
en siffra, t ex Arrej\[0\]\[2\]\[4\]="Melon"; och sedan använda
"4" till att vara värde för sedan, genom att göra en förändring
i raden
document.val.sedan.options\[ctr\]=new Option(Arrej\[num\]\[ctr\],Arrej\[num\]\[ctr\]);

?

Permalänk: https://www.webforum.nu/p/1248578

## #8 — dectgap, 2004-01-13T17:33Z

I så fall kan du skriva så här:

```
<SCRIPT Language="JavaScript"><!--

Arrej=new Array(3);
Arrej[0]=new Array(3);
Arrej[1]=new Array(2);
Arrej[2]=new Array(4);

Arrej[0][0]=new Array("Banan", 0);
Arrej[0][1]=new Array("Apelsin", 1);
Arrej[0][2]=new Array("Melon", 2);

Arrej[1][0]=new Array("Gul", 3);
Arrej[1][1]=new Array("vit", 4);

Arrej[2][0]=new Array("Cykel", 5);
Arrej[2][1]=new Array("Bil", 6);
Arrej[2][2]=new Array("Buss", 7);
Arrej[2][3]=new Array("Tunnelbana", 8);

function SkapaVal(num)
{

document.val.sedan.options.length = Arrej[num].length;

for(ctr=0;ctr<Arrej[num].length;ctr++)
{
document.val.sedan.options[ctr]=new Option(Arrej[num][ctr][0],Arrej[num][ctr][1]);
}

document.val.sedan.selectedIndex=0;
}
//--></Script>
```

Eller , med lite mindre kod:

```
<SCRIPT Language="JavaScript"><!--

Arrej=new Array(3);
Arrej[0]=new Array(3);
Arrej[1]=new Array(2);
Arrej[2]=new Array(4);

Arrej[0][0]=["Banan", 0];
Arrej[0][1]=["Apelsin", 1];
Arrej[0][2]=["Melon", 2];

Arrej[1][0]=["Gul", 3];
Arrej[1][1]=["vit", 4];

Arrej[2][0]=["Cykel", 5];
Arrej[2][1]=["Bil", 6];
Arrej[2][2]=["Buss", 7];
Arrej[2][3]=["Tunnelbana", 8];

function SkapaVal(num)
{

document.val.sedan.options.length = Arrej[num].length;

for(ctr=0;ctr<Arrej[num].length;ctr++)
{
document.val.sedan.options[ctr]=new Option(Arrej[num][ctr][0],Arrej[num][ctr][1]);
}

document.val.sedan.selectedIndex=0;
}
//--></Script>
```

Permalänk: https://www.webforum.nu/p/1248580

## #9 — danieleinad, 2004-01-13T18:21Z

Kanon, fungerar utmärkt!

Sök-formuläret finns även med på resultatsidan,
och där skulle jag vilja att det valet jag gjorde i
sedan-selectmenyn var SELECTED, dvs markerat.

I "huvud"-selectmenyn kan jag ju lägga en
if($huvud=="2") echo "SELECTED";

men hur gör jag med sedan-selectmenyn?

Du driver möjligtvis inte eget företag?

Permalänk: https://www.webforum.nu/p/1248615

## #10 — dectgap, 2004-01-13T19:56Z

Du kan köra funktionen SkapaVal() när sidan laddas för att få upp rätt meny så här:

```
window.onload=function(){
    SkapaVal(<?=(isset($huvud))?$huvud:0?>);
}
```

Huruvida du har tänkt att sedan-menyn ska vara fylld från början eller inte vet jag inte, men det är inte så svårt att ändra.

Fast vill du även att rätt val ska komma upp i den andra menyn får vi nog göra om det hela lite, och istället skriva så här (inom \<script\>-taggarna):

```
window.onload=function(){
    var huvud = <?=(isset($huvud))?$huvud:0?>;
    var sedan = <?=(isset($sedan))?$sedan:0?>;

    document.val.sedan.options.length = Arrej[huvud].length;

    for(ctr=0;ctr<Arrej[huvud].length;ctr++)
    {
        if(Arrej[huvud][ctr][1]==sedan)
            document.val.sedan.options[ctr]=new Option(Arrej[huvud][ctr][0],Arrej[huvud][ctr][1], 1, 1);
        else
            document.val.sedan.options[ctr]=new Option(Arrej[huvud][ctr][0],Arrej[huvud][ctr][1]);
    }
}
```

Och nej, jag driver inte eget företag, även om jag har haft planer på att starta ett :)

Permalänk: https://www.webforum.nu/p/1251675

---

Tråden på webben: https://www.webforum.nu/amne/javascript/94717-dynamisk-drop-down-select-i-formulär