Problem mit <select onchange ... "

[TBT]

Hallo,

ich habe eine Selectbox und möchte wenn diese ausgefüllt wird automatisch
eine neue leere erstellen lassen. Das Problem dabei ist, das er bei der
ausgefüllten Box den Wert wieder auf leer setzt.

<script type="text/javascript">
	var hscount = 1;
	function newhsfield(){
		table = document.getElementById('hstable');
		hscount++;
		table.innerHTML += 	'<tr>'
						+	'<td>'
						+	'<select name=hs' + hscount + ' onchange="newhsfield();">'
						+	'	<option value=0></option>'
						+	'	<option value=1>1. HS</option>'
						+	'</select>'
						+	'</td>'
						+	'<td></td>'
						+	'</tr>';
	}
</script>

der HTML Code dazu sieht so aus

<table id=hstable>
	<tr>
		<td>
			<select name=hs1 id=hs1 onchange="newhsfield();">
				<option value=0></option>
				<option value=1>1. HS</option>
			</select>
		</td>
		<td></td>
	</tr>
</table>

jemand eine Idee?

[wahsaga]

Re: Problem mit &lt;select onchange ... &quot;

table.innerHTML beinhaltet den reinen HTML-code, so wie er schon bei der auslieferung des dokumentes war - und zu dem zeitpunkt war in deinem select nun mal noch nichts (vor)ausgewählt.

also wird das select-feld auch wieder zurückgesetzt, wenn du innerHTML wieder mit dem code dieses selects plus x überschreibst.

wenn du da nicht großartig drin rumfummeln willst, würde ich mir einfach eine funktion schreiben, die vorher von allen bisher vorhandenen selects den/die ausgewählten index ausliest, und anschließend (nach der innerHTML-ersetzung) diese wieder setzt.

[TBT]

ich habe es geahnt ...

[wahsaga]

na ja, vielleicht wär's ja auch schöner, sich nicht auf innerHTML zu verlassen, sondern "sauber" über's DOM ein neues selectfeld zu erzeugen und dann einfach unter dem bestehenden einzuhängen ... dann ändert sich ja am bestehenden (und damit auch an seiner auswahl) nichts.

[TBT]

habs nun so gebaut

<script type="text/javascript">
	var hscount = 1;
	var empty	= 1;
	var sel		= new Array();
	function newhsfield( id ){
		sel[id] = document.getElementById('hs'+id).value;
		if( empty != id ){
			return;
		}
		table = document.getElementById('hstable');
		hscount++;
		for (var i = 1; i < sel.length; i++)	{
			if( document.getElementById('hs'+i).value == 0 ){
				empty = i;
				break;
			}
			empty = hscount;
		}
		table.innerHTML += 	'<tr><td>'
						+	'<select name=hs' + hscount + ' id=hs' + hscount + ' onchange="newhsfield(' + hscount + ');">'
						+	'	<option value=0></option>'{loop js_hsselect}
						+	'	<option value={key}>{value}</option>'{/loop js_hsselect}
						+	'</select>'
						+	'</td>'
						+	'<td>'
						+	'<select name=sem1 id=sem1>'
						+	'	<option value=0></option>'{loop js_semselect}
						+	'	<option value={key}>{value}</option>'{/loop js_semselect}
						+	'</select>'
						+	'</td>'
						+	'</tr>';
		for (var i = 1; i < sel.length; i++)	{
			document.getElementById('hs'+i).value = sel[i];
			document.getElementById('hs'+i).selectedItem = sel[i];
		}
	}
</script>