webForumDet fria alternativet

JS-problem med droplist.

6 svar · 373 visningar · startad av danis

danisMedlem sedan aug. 2002209 inlägg
#1

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

J.N.Medlem sedan apr. 20031 660 inlägg
#2

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?

danisMedlem sedan aug. 2002209 inlägg
#3

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

J.N.Medlem sedan apr. 20031 660 inlägg
#4

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>

danisMedlem sedan aug. 2002209 inlägg
#5

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

http://arbetare.se/js2.htm

Nu visas inga alternativ istället.

nitro2k01Medlem sedan aug. 20037 630 inlägg
#6

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>
J.N.Medlem sedan apr. 20031 660 inlägg
#7

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?

Genererad på 373 ms · cache AV · v20260730165559-full.f96bc7eb