Option-Objekt

Inhaltsverzeichnis

Allgemeines

Eigenschaften

selectedIndex

zurück zum Index

Allgemeines

Mit dem Option-Objekt hat man Zugriff auf Auswahllisten innerhalb eines Formulars.
Man kann dabei auf jede einzelne Auswahlmöglichkeit der Auswahlliste zugreifen.
liegt in der Hierarchie unterhalb des Elements-Objekt

Eigenschaften

selectedIndex

speichert, ob oder dass ein bestimmter Eintrag einer Auswahlliste selektiert ist
Wenn nichts ausgewählt ist, dann ist in der Eigenschaft der Wert -1 gespeichert.

Beispiele:

Beispiel 1:
Der Benutzer wählt aus einer Auswahlliste einen Wert, der danach in einem Textfeld ausgegeben wird.

<html>
	<head>
		<title>
			
		</title>
		<script language="JavaScript">
		<!--BEGIN
			var ein=new Array(3);
			ein[0]="";
			ein[1]="Peter";
			ein[2]="Fritz";
			function eintrag()
			{
				document.F1.T1.value=ein[document.F1.S1.selectedIndex];
			}
		//END-->
		</script>
	</head>
	<body>
		<form name=F1>
			<select name="S1" size=1 onChange="eintrag()">
				<option value="0" selected>Auswahl</option>
				<option value="1">Name1</option>
				<option value="2">Name2</option>
			</select>
			<input type="text" name="T1" size=20 value="">
		</form>
	</body>
</html>

Beispiel 2:
Der Benutzer wählt aus einer Auswahlliste eine Suchmaschine aus, die dann in einem Unterfenster geöffnet wird.

Lösung 1:

<html>
	<head>
		<title>
			
		</title>
		<script language="JavaScript">
		<!--BEGIN
			var ein=new Array(3);
			ein[0]="";
			ein[1]="http://www.web.de";
			ein[2]="http://www.yahoo.de";
			var attribute="width=500,height=500,statusbar=yes,scrollbars=yes,menubar=yes,toolbar=yes,location=yes,resizable=yes";
			function eintrag()
			{
				document.F1.T1.value=ein[document.F1.S1.selectedIndex];
			}
			function fenster()
			{
				var a=document.F1.T1.value
				var b=open(a,"fenster1",attribute);
			}
		//END-->
		</script>
	</head>
	<body>
		<form name=F1>
			<select name="S1" size=1 onChange="eintrag()">
				<option value="0" selected>Auswahl</option>
				<option value="1">web.de</option>
				<option value="2">yahoo.de</option>
			</select>
			<input type="text" name="T1" size=20 value="">
			<input type="button" name="B1" value="Seite laden" onClick="fenster()">
		</form>
	</body>
</html>

Lösung 2:
Modularisierung durch drei externe *.js-Dateien, die in die *.htm-Datei eingeladen werden

HTML-Quelltext:

<html>
	<head>
		<title>
			
		</title>
		<script language="JavaScript"src="werte.js">
		</script>
		<script language="JavaScript"src="inhalte.js">
		</script>
	</head>
	<body bgColor="#FFFFFF" text="#000000">
		<script language="JavaScript"src="ermittlung.js">
		</script>
	</body>
</html>

JavaScript-Quelltext:

Datei 1:option3_werte.js

var Fenster2="";
var ein=new Array("","http://www.web.de","http://www.yahoo.de");
var attribute="width=800,height=600,statusbar=yes,menubar=no,toolbar=no,location=no,resizable=yes";

Datei 2: option3_inhalte.js

function erzeuge()
{
	document.writeln('<form name="F1"><select name="S1" size=1 onChange="eintrag()">'+
	'<option value="0" selected>Bitte auswählen</option><option value="1">'+
	'Link zur Web-Site 1</option><option value="2">Link zur Web-Site 2</option></select><p>'+
	'<input type="text" maxlength=20 name="T1" size=20 value="">   '+
	'<input type="button" name="B1" value="Link" onClick="ausfuehren()"></p></form>');
}

Datei 3:option3_ermittliung.js

function eintrag()
{
	document.F1.T1.value=ein[document.F1.S1.selectedIndex];
}
function ausfuehren()
{
	if(ein[document.F1.S1.selectedIndex]!=0)
	{
		Fenster2=window.open(ein[document.F1.S1.selectedIndex],"Fenster2",attribute);
		Fenster2.focus();document.F1.reset();
	}
}
erzeuge();

zurück zum Seitenanfang
zurück zum Index