7-3 ??下?式選??

ϥ select ҡAڭ̥iHͳάOh諸UԦAOoǿ檺ﶵOTwAYnYɧܳoǿﶵANna JavaScriptC`NpH JavaScript ӧYɧܳoǿﶵAHͰʺAUԦC

]@ӿ檺W٬O theListA򥦩Ҩ㦳ʽiHpUG

pGڭ̭nR檺ﶵAا@kG
  1. ϥ theList.options[i]=null iHR i ӿﶵC
  2. ϥ theList.options.length=n iHNﶵӼƳ]w nAlhﶵN|QRC
YnW[ﶵAiHϥΤUCROG theList.options[i]=new Option(text, value); 䤤 text M value ONsﶵrMȡCpߪOG bUCdҤAڭ̥iHʺAaW[ΧRﶵG

Example]dynamicListBox01.htm^G

WzdҪlɮצpUG

lɡ]dynamicListBox01.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>ʺAUԦGW[ﶵPRﶵ</h2>
<hr>

<script>
function deleteOption(list){
	var index=list.selectedIndex;
	if (index>=0)
		list.options[index]=null;
	else
		alert("LϥտﶵI");
}

function addOption(list, text, value){
	var index=list.options.length;
	list.options[index]=new Option(text, value);
	list.selectedIndex=index;
}
</script>

<form>
<select id=theList size=5>
	<option value=P@>Monday
	<option value=PT>Wednesday
	<option value=P>Friday
	<option value=P>Sunday
</select>
<p>
<input type="button" value="Rϥտﶵ" onclick="deleteOption(theList)"><br>
<input type="button" value="W[kCﶵ" onclick="addOption(theList, theText.value, theValue.value)">
Text: <input id=theText value="test">
Value: <input id=theValue value="test">
</form>

<hr>
</body>
</html>

bWzdҤAڭ̨ϥ id Ӥϥ name ӥN汱AnBOiHϥ id ӨϥΪ椸AӤ@wngѤ󪫥ҫhcӥѤWUB@h@hwC

QΦP˪Aڭ̥iH𪬪cAiϥΪ̶iuؿjMv]Directory Search^CbUCdҤAڭ̧QΰʺAUԦ沣ͨh𪬵cAκ١uسsʡvAyܻAAunbtOAkN|X{AиլݬݡG

Example]dynamicListBox02.htm^G

WzdҪlɮצpUG

lɡ]dynamicListBox02.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>ʺAUԦGسsʡ]h𪬿ﶵ^</h2>
<hr>

<script>
department=new Array();
department[0]=["i", "I", "", "i@N", "iP"];	// Tt
department[1]=["P", "", "fz", "Gծ", "cV"];	// qt
department[2]=["q", "", "v", ""];			// ʾt
department[3]=["Ѥ", "}", "祿"];				// ut

function renew(index){
	for(var i=0;i<department[index].length;i++)
		document.myForm.member.options[i]=new Option(department[index][i], department[index][i]);	// ]wsﶵ
	document.myForm.member.length=department[index].length;	// Rhlﶵ
}
</script>

<form name="myForm">
tOG
<select size=5 onChange="renew(this.selectedIndex);">
	<option value="Tt">Tt
	<option value="qt">qt
	<option value="ʾt">ʾt
	<option value="ut">ut
</select>

G
<select name="member" size=5>
	<option value="">ХѥtO
</select>
</form>

<hr>
</body>
</html>

bWzdҤAڭ̥ΨFG}CAHKsơC

ϥ覡Aڭ̤]iHͤTh𪬵cAκ١uTسsʡvCbUCdҤAڭ̱NqƤTӼhAOOyBqBqWAHKiؿjMAdҦpUG

Example]dynamicListBox03.htm^G

bWzdҤAAiHbIyAN|ܬqAIqAkN|ܬqWAۧAAIqWAUN|X{㪺jM|ClɮצpUG

lɡ]dynamicListBox03.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>ʺAUԦGTسsʡ]Th𪬿ﶵ^</h2>
<hr>

<script>
function node(name, child){
	this.name=name;
	this.child=child;
}

function dataHierarchy(){
	// yq
	var mandarin=new Array();
	var i=0;
	mandarin[i++]=new node("iǤ", ["ڵ]¤F", "@dӶˤߪz", "@"]);
	mandarin[i++]=new node("iff", ["ť", "ŷR", "ӧA򳣤n", "TѤT]"]);
	mandarin[i++]=new node("Bw", ["§AR", "ӥͽt", "ѱ"]);
	mandarin[i++]=new node(  "", ["Hq", "Kt"]);
	mandarin[i++]=new node("Pذ", ["", "ߪV"]);
	// ^yq
	var english=new Array();
	var i=0;
	english[i++]=new node("Michael", ["Beat It", "Billie Jean", "Heal The World"]);
	english[i++]=new node("Celine", ["My Heart Will Go On", "Hope"]);
	// yO
	var output=new Array();
	var i=0;
	output[i++]=new node("y", mandarin);
	output[i++]=new node("^y", english);

	return(output);
}
dataTree=dataHierarchy();

// ĤTQʫ᪺ʧ@
function onChangeColumn3(){
	updatePath();
}

// ĤGQʫ᪺ʧ@
function onChangeColumn2(){
	form=document.theForm;
	index1=form.column1.selectedIndex;
	index2=form.column2.selectedIndex;
	index3=form.column3.selectedIndex;
	// Create options for column 3
	for (i=0;i<dataTree[index1].child[index2].child.length;i++)
		form.column3.options[i]=new Option(dataTree[index1].child[index2].child[i], dataTree[index1].child[index2].child[i]);
	form.column3.options.length=dataTree[index1].child[index2].child.length;
	updatePath();
}

// Ĥ@Qʫ᪺ʧ@
function onChangeColumn1() {
	form=document.theForm;
	index1=form.column1.selectedIndex;
	index2=form.column2.selectedIndex;
	index3=form.column3.selectedIndex;
	// Create options for column 2
	for (i=0;i<dataTree[index1].child.length;i++)
		form.column2.options[i]=new Option(dataTree[index1].child[i].name, dataTree[index1].child[i].name);
	form.column2.options.length=dataTree[index1].child.length;
	// Clear column 3
	form.column3.options.length=0;
	updatePath();
}

// קܪ|
function updatePath(){
	form=document.theForm;
	index1=form.column1.selectedIndex;
	index2=form.column2.selectedIndex;
	index3=form.column3.selectedIndex;
	if ((index1>=0) && (index2>=0) && (index3>=0)) {
		text1=form.column1.options[index1].text;
		text2=form.column2.options[index2].text;
		text3=form.column3.options[index3].text;
		form.path.value=text1+" ==> "+text2+" ==> "+text3;
	} else
		form.path.value="";
}
</script>

<form name="theForm">
<table align=center border=1>
	<tr>
		<th>qy<th>qPWr<th>qM
	<tr>
		<td align=center>
			<select name="column1" size=10 onChange="onChangeColumn1();">
				<script>
				for (i=0; i<dataTree.length; i++)
					document.writeln("<option value=\""+dataTree[i].name+"\">"+dataTree[i].name);
				</script>
			</select>
		<td align=center>
			<select name="column2" size=10 onChange="onChangeColumn2();">
			</select>
		<td align=center>
			<select name="column3" size=10 onChange="onChangeColumn3();">
			</select>
	<tr><td colspan=3 align=center>|G<input type=text name=path size=60></td></tr>
</table>
</form>

<hr>
</body>
</html>

bWzdҤAڭ̨ϥΤF@Ӧۭq󪺫غc node()AHKΨӫإߦTh𪬸ƵcCƵciHܦpUG

y --- iǤ --- ڵ]¤F --- @dӶˤߪz --- @ --- iff --- ť --- ŷR --- ӧA򳣤n --- TѤT] --- Bw --- §AR --- ӥͽt --- ѱ --- --- Hq --- Kt --- Pذ --- --- ߪV ^y --- Michael --- Beat It --- Billie Jean --- Heal The World --- Celine --- My Heart Will Go On --- Hope
JavaScript {]pPΡGΩΤ