OnClick och därefter visas fler val

3 svar · 374 visningar · startad av sin_adec 11 feb. 2007

sin_adecMedlem sedan apr. 2002272 inlägg

Frågan11 feb. 2007 11:19#1

tjenare, igår var man inne på blocket och tittade lite, så valde jag bilar på menyn och då fick man upp fler formulärs alternativ.

någon här som vet hur man gör en sådan funktion?.

sin_adecMedlem sedan apr. 2002272 inlägg

11 feb. 2007 11:38#2

jag hittade en gammal text fil på hårddisken där koden låg i. här har ni koden.

<html>
<script type="text/javascript">
function setAlt(alt)
{
	for (var i = 0; i < alt.options.length; i++)
	{
		var val = alt.options[i].value
		if (val != "")
			document.getElementById("alt" + val).style.display = "none";
	}
	
	var val = alt.options[alt.selectedIndex].value
	if (val != "block")
		document.getElementById("alt" + val).style.display = "block";
}
</script>

<style type="text/css">
DIV.alt {
	display: none;
}
</style>

<form>

<select name="Alt" onChange="setAlt(this);">
	<option value=""></option>
	<option value="1">Alternativ 1</option>
	<option value="2">Alternativ 2</option>
</select><br>
<br>

<div class="alt" id="alt1">
	Alternativ 1 fält 1<br>
	<input type="text" name="Alt1_1" value=""><br>
	<br>
	Alternativ 1 fält 2<br>
	<input type="text" name="Alt1_2" value=""><br>
	<br>
	Alternativ 1 fält 3<br>
	<input type="text" name="Alt1_3" value=""><br>
	<br>
</div>
<div class="alt" id="alt2">
	Alternativ 2 fält 1<br>
	<input type="text" name="Alt2_1" value=""><br>
	<br>
	Alternativ 2 fält 2<br>
	<textarea name="Alt2_2"></textarea><br>
	<br>
</div>

</form>
</html>

Peter SMedlem sedan dec. 20025 483 inlägg

11 feb. 2007 13:43#3

Hej!

Markera gärna ditt senaste svar som slutgiltigt :bire

itpastornMedlem sedan feb. 2007278 inlägg

11 feb. 2007 18:08#4

Ett bättre sätt

Hej

För att göra formulär enklare att hantera är det ofta en bra ide att dölja kontroller som inte behövs. Typ att inte ha ett fält för "maka/makes namn" om man kryssat i "ogift".

Dock bör man dölja onödiga kontroller med CSS-klasser i stället för inline-styles, som i det förra svaret. Det är både enklare i längden och ger snabbare rendering.

Jag vill också varna för onChange som i MSIE är oanvändbart på längre listor om du använder piltangenterna.

Ett annat bra knep är att kunna fylla på med fler rader successivt. Web Forms 2.0 kommer ha detta inbyggt. Det finns flera demon på nätet. Till dess webbläsarna stödjer Web Forms 2.0 (det gör bara Opera än, och det bara provisoriskt) så kan funktionen emuleras med skript. För detta krävs att du manipulerar dokumentets objektmodell (DOM).

Boken PPK on JavaScript tar upp båda dessa aspekter på ett superbt sätt.

Lars Gunther