---
title: "JS-problem med droplist."
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/146044-js-problem-med-droplist"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "danis"
published: "2006-04-25T16:08:41.000Z"
updated: "2006-04-28T11:45:05.000Z"
replies: 6
views: 377
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/146044-js-problem-med-droplist"
---

# JS-problem med droplist.

## #1 — danis, 2006-04-25T16:08Z

Hejsan!  :bire 

Har ett litet problem och tänkte höra om det finns någon snäll människa som skulle kunna hjälpa mig.

Det är en droplist som styr värdet i en annan droplist. (Ex. Väljer jag ett värde i droplisten "brand" så dyker det upp nya värden i droplisten "model")

**Mitt problem:** Jag vill att det alltid ska stå "- Välj modell -" överst i "model"-droplisten.

Nån som vet?

Se koden nedan.

```
<script LANGUAGE="JavaScript" TYPE="text/javascript">
KAT = new Array(); 
KAT[0] = new Array ('modell1','modell2','modell3'); 
KAT[1] = new Array ('modell4','modell5','modell6'); 
KAT[2] = new Array ('modell7','modell8','modell9'); 

function populate2(nr, theForm) {

  if(nr==0) 
    return; 
 
  nr--; 
  theForm.car_model.options.length = KAT[nr].length;

  for(i=0; i<KAT[nr].length; i++){ 

    theForm.car_model.options[i].text = KAT[nr][i]; 
    theForm.car_model.options[i].value = KAT[nr][i]; 
  } 
} 
</script>

<form method="post" name="form" action="index.asp?s=next">

<select name="brand" onchange="populate2(this.selectedIndex, this.form)" style="width:100px;"> 
<option value="">- Alla märken -</option> 
<option value="Nokia">Nokia</option> 
<option value="Sony ericsson">Sony ericsson</option> 
<option value="Motorola">Motorola</option> 
</select>

<br><br>

<select name="model" style="width:100px">
<option value=''>- Välj modell -</option> 
</select>
</form>
```

Mvh Danne

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

## #2 — J.N., 2006-04-27T14:20Z

HEJ!

Prova med detta före loopen som populerar, dvs for-satsen.

```
theForm.car_model.options[i].text = "- Välj modell -" 
theForm.car_model.options[i].value = ""

(car_model, är det samma som model???)
```

Blir det inte konstigt att det står samma text när man har valt något?

Hur fungerar avpopuleringen av listan när man väljer ett annat märke, eller den koden är inte med? Borde funnits en loop med för det?

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

## #3 — danis, 2006-04-27T16:21Z

> **J.N. skrev:**
>
> HEJ!
> 
> Prova med detta före loopen som populerar, dvs for-satsen.
>
> ```
> theForm.car_model.options[i].text = "- Välj modell -" 
> theForm.car_model.options[i].value = ""
> 
> (car_model, är det samma som model???)
> ```
>
> Blir det inte konstigt att det står samma text när man har valt något?
> 
> 
> Hur fungerar avpopuleringen av listan när man väljer ett annat märke, eller den koden är inte med? Borde funnits en loop med för det?

Har prövat det, verkar inte fungera så bra.
<http://arbetare.se/js2.htm>

Så här ser originallistan ut:
<http://arbetare.se/js.htm>

car_model är samma som model ja, blev lite fel där.  :i  Är inte så hajj på JS direkt, men borde inte vara så svårt tycker jag.  :l

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

## #4 — J.N., 2006-04-28T08:03Z

HEJ!

Du får ett javascriptfel som säger att i inte är definierad, vilket beror på att jag inte ersatte räknaren med 0. Du har ju ingen räknare där, och texten ska ju alltid ligga överst.

\<R\>
Tur man testade vad man föreslog, det visade sig att den försvinner meddetsamma, eftersom loopen lägger in värdet på plats 0 i arrayen där den ska ligga, på första plats. ;)

Efter lite justering av räknare och loopar blir det såhär.

```
function populate2(nr, theForm) {

  if(nr==0) 
    return; 
 
  nr--; 
  theForm.model.options.length = KAT[nr].length+1;

theForm.model.options[0].text = "- Välj modell -" 
theForm.model.options[0].value = ""

  for(i=0; i<KAT[nr].length; i++){ 

    theForm.model.options[i+1].text = KAT[nr][i]; 
    theForm.model.options[i+1].value = KAT[nr][i]; 
  } 
}
```

\</R\>

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

## #5 — danis, 2006-04-28T10:38Z

Hehe, även testat  +1 och det fungerar inte heller.

<http://arbetare.se/js2.htm>

Nu visas inga alternativ istället.

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

## #6 — nitro2k01, 2006-04-28T11:36Z

Då får väl jag komma med en klockren lösning som vanligt!
Observera!! Du måste skilja på stora och små bokstäver i märkesnamnet med detta skript. Står det Sony Ericsson högst upp så blir det fel om det står value="Sony ericsson" i option-taggen.

```
<script LANGUAGE="JavaScript" TYPE="text/javascript">
KAT = {
	'Nokia': ['Nmodell1','Nmodell2','Nmodell3'],
	'Sony Ericsson': ['Smodell4','Smodell5','Smodell6'],
	'Motorola': ['Mmodell7','Mmodell8','Mmodell9']
}

function ZOption(caption){
	var tempel = document.createElement("OPTION");
	tempel.value = caption;
	tempel.appendChild(document.createTextNode(caption));
	return tempel;
}

function populate3(thisone, theotherone, cats) {
	// Depopulate model list (But leave topmost option)
	while (theotherone.options[1])
		theotherone.removeChild(theotherone.options[1]);

	// If no brand is selected, leave!
	if (!thisone.options[thisone.selectedIndex].value)
		return;

	// Get the correct array
	var tname = thisone.options[thisone.selectedIndex].value,
		tra = cats[tname];

	for (var i=0; i<tra.length; i++)
		theotherone.appendChild(new ZOption(tra[i]));

}
</script>

<form method="post" name="form" action="index.asp?s=next">

<select name="brand" onchange="populate3(this, this.form.model, KAT)" style="width:100px;">
<option value="">- Välj märke -</option>
<option value="Nokia">Nokia</option>
<option value="Sony Ericsson">Sony ericsson</option>
<option value="Motorola">Motorola</option>
</select>

<br><br>

<select name="model" style="width:100px">
<option value=''>- Välj modell -</option>
</select>
</form>
```

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

## #7 — J.N., 2006-04-28T11:45Z

HEJ!

Om du tar bort sista } så fungerar det alldeles utmärkt!
Varför har du lagt dit den?  §e

Märkte nu att valt index kvarstår, om man byter märke, efter att ha valt en modell, men det kanske inte gör något?

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

---

Tråden på webben: https://www.webforum.nu/amne/javascript/146044-js-problem-med-droplist