下拉列表动态关联更新
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=GB2312">
</head>
<body>
<h2 align=center>動態下拉式選單：三框連動（三層樹狀選項）</h2>
<hr>
<script>
function category(name, itemList){
this.name=name;
this.itemList=itemList;
}
function dataHierarchy(){
//國語歌手
var mandarin=new Array();
var i=0;
mandarin[i++]=new category("張學友", ["我等到花而也謝了", "一千個傷心的理由", "咖啡"]);
mandarin[i++]=new category("張惠妹", ["聽海", "剪愛", "原來你什麼都不要", "三天三夜"]);
mandarin[i++]=new category("劉德華", ["謝謝你的愛", "來生緣", "忘情水"]);
mandarin[i++]=new category( "伍佰", ["浪人情歌", "樹枝孤鳥"]);
mandarin[i++]=new category("周華健", ["花心", "心的方向"]);
//英語歌手
var english=new Array();
var i=0;
english[i++]=new category("Jackson", ["Beat It", "Billie Jean", "Heal The World"]);
english[i++]=new category("Celindion", ["My Heart Will Go On", "Hope"]);
//
var chinese=new Array();
var i=0;
chinese[i++]=new category("王珍亚", ["什么", "哦", "Heal The World"]);
chinese[i++]=new category("王译", ["可贵", "Hope"]);
var output=new Array();
i=0;
output[i++]=new category("國語", mandarin);
output[i++]=new category("英語", english);
output[i++]=new category("中語", chinese);
return(output);
}
dataTree=dataHierarchy();
function onChangeColumn3(){
updatePath();
}
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].itemList[index2].itemList.length;i++)
form.column3.options=new Option(dataTree[index1].itemList[index2].itemList, dataTree[index1].itemList[index2].itemList);
form.column3.options.length=dataTree[index1].itemList[index2].itemList.length;
updatePath();
}
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].itemList.length;i++)
form.column2.options=new Option(dataTree[index1].itemList.name, dataTree[index1].itemList.name);
form.column2.options.length=dataTree[index1].itemList.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>歌曲語言<th>歌星名字<th>歌曲清單
<tr>
<td align=center>
<select name="column1" size=1 onChange="onChangeColumn1();">
<script>
for (i=0; i<dataTree.length; i++)
document.writeln("<option value=\""+dataTree.name+"\">"+dataTree.name);
</script>
</select>
<td align=center>
<select name="column2" size=1 onChange="onChangeColumn2();">
</select>
<td align=center>
<select name="column3" size=1 onChange="onChangeColumn3();">
</select>
<tr><td colspan=3 align=center>路徑：<input type=text name=path size=60></td></tr>
</table>
</form>
<hr>
</body>
</html>
下拉列表动态关联更新
bywzy 发表于 程序设计 分类，
25
九月
2006
0
