Multiple Select auslesen

[mikethet]

Hallo,

habe mit HTML ein Multiple Select-Feld (id = icecreme) erstellt und wollte die selektierten Werte auslesen und in einem div-Feld (Output) ausgeben.

Meine Funktion dazu sieht so aus:

function IceCreme(){
var sorten =document.getElementById("icecreme");
var Output =document.getElementById("Output");
for(x =0; x <= sorten.length; x++){
if(sorten[x].selected == true){
Output.innerHTML = sorten[x].value;
   }
}

Habe in meine JavaScipt-Buch ein Programm was genau diese Funktion erfüllt, nur will ich es, ohne es verstanden zu haben, natürlich nicht einfach abkupfern.

Ich hoffe ihr könnt mir erklären, was falsch ist.

LG Mike

[ms88aut]

mit Output.innerHTML = sorten[x].value; überschreibst du jedesmal den kompletten Inhalt von Output. (du willst aber die werte nehm ich an aneinanderhängen oder hintereiander auflisten):

Output.innerHTML = Output.innerHTML + ", " + sorten[x].value;

[mikethet]

mit Output.innerHTML = sorten[x].value; überschreibst du jedesmal den kompletten Inhalt von Output. (du willst aber die werte nehm ich an aneinanderhängen oder hintereiander auflisten):

Output.innerHTML = Output.innerHTML + ", " + sorten[x].value;

Kann es sein, dass vorher schon ein Fehler ist?

Er zeigt mir nämlich gar nichts an.

Wenn ich jedesmal den Inhalt überschreiben tue, müsste er mir zumindest den letzten selektierten Wert anzeigen. Tut er aber nicht.

[ms88aut]

<select size='3' multiple='multiple' id="test">  
	<option value='a'>a</option>  
	<option value='b'>b</option>  
	<option value='c'>c</option>  
</select>

<script type="text/javascript">  
	var sel = document.getElementById("test");  
	var len = sel.options.length;  
	var str = "";  
	for (var i = 0; i < len; i++) {  
		if(sel.options[i].selected) {  
			str += sel.options[i].value;  
		}  
	}  
	alert(str);  
</script>

[ChrisB]

Hi,

Kann es sein, dass vorher schon ein Fehler ist?

Schau in die JavaScript-Fehlerkonsole deines Browsers.

Gewöhne dir an, das während der Entwicklung *immer* zu tun.

MfG ChrisB

[ichbinich]

Hallo,

function IceCreme(){

var sorten =document.getElementById("icecreme");

Du iterierst über das Select-Element, möchtest aber Options haben  
  

> ~~~javascript

var Output =document.getElementById("Output");  

>  for(x =0; x <= sorten.length; x++){  
>    if(sorten[x].selected == true){  
>      Output.innerHTML = sorten[x].value;  

hier überschreibst du bei jedem Treffer den Inhalt von #Output. Es ist auch nicht empfehlenswert, ständig ins DOM zu schreiben, "sammel" erst ale Values und schreibe sie dann einmalig.

|~~~javascript     }

}

hier fehlt `}`{:.language-javascript} ist aber wahrscheinlich nur ein copy&paste-Fehler.  
  
Ich hab dir die Funktion mal ein bischen umgeschrieben:  
~~~javascript
function IceCreme(){  
	var sorten =document.getElementById("icecreme").options,  
	    Output =document.getElementById("Output"),  
	    out = new Array(),  
	    i=0;  
	  
	for(var x=0; x<sorten.length; x++){  
		if(sorten[x].selected == true){  
 			out[i++] = sorten[x].value;  
		}  
	}  
	Output.innerHTML = out.join(', ');  
}

Bei Fragen fragen ;)

vg ichbinich

[mikethet]

Hallo,

function IceCreme(){

var sorten =document.getElementById("icecreme");

> Du iterierst über das Select-Element, möchtest aber Options haben  
>   
> > ~~~javascript

var Output =document.getElementById("Output");  

> >  for(x =0; x <= sorten.length; x++){  
> >    if(sorten[x].selected == true){  
> >      Output.innerHTML = sorten[x].value;  
> 

hier überschreibst du bei jedem Treffer den Inhalt von #Output. Es ist auch nicht empfehlenswert, ständig ins DOM zu schreiben, "sammel" erst ale Values und schreibe sie dann einmalig.

|~~~javascript

}

}

> hier fehlt `}`{:.language-javascript} ist aber wahrscheinlich nur ein copy&paste-Fehler.  
>   
> Ich hab dir die Funktion mal ein bischen umgeschrieben:  
> ~~~javascript

function IceCreme(){  

> 	var sorten =document.getElementById("icecreme").options,  
> 	    Output =document.getElementById("Output"),  
> 	    out = new Array(),  
> 	    i=0;  
> 	  
> 	for(var x=0; x<sorten.length; x++){  
> 		if(sorten[x].selected == true){  
>  			out[i++] = sorten[x].value;  
> 		}  
> 	}  
> 	Output.innerHTML = out.join(', ');  
> }

Bei Fragen fragen ;)

vg ichbinich

Danke erstmal für die schnellen Antworten!

Sehe gerade das ich IceCream falsch geschrieben habe. Bitte nicht beachten. ^.^

@ichbinich: Hallo,

im ersten Satz. Referenziere ich doch direkt auf das Select-Objekt. Warum aber will ich bzw. brauch ich dort die options?

Nächste Frage: Das vorherige abspeichern in ein Array finde ich gut. Nur warum ist es Nachteilhaft jedesmal das DOM zu schreiben. Wird sonst durch jeden Schleifendurchgang sozusagen die Seite "upgedated". Also ist es resourcenschonender zuerst alles abzuspeichern und dann auf einmal auszugeben?

Danke und LG Mike

[ichbinich]

Hallo,

im ersten Satz. Referenziere ich doch direkt auf das Select-Objekt. Warum aber will ich bzw. brauch ich dort die options?

Weil du den Inhalt von diesen ausgeben willst?

Nächste Frage: Das vorherige abspeichern in ein Array finde ich gut. Nur warum ist es Nachteilhaft jedesmal das DOM zu schreiben. Wird sonst durch jeden Schleifendurchgang sozusagen die Seite "upgedated". Also ist es resourcenschonender zuerst alles abzuspeichern und dann auf einmal auszugeben?

Genau das - es ist resourcenschonender.

vg ichbinich