專業防水抓漏服務,30多年經驗
品質保證,值得您信賴!
門窗工程免費估價!知名建案配合
外牆清潔絕不轉包,隨傳隨到!
J2H流行雜誌J2h論壇程式設計討論   
交友配對個人設定加入會員會員說明重新登入


[教學]動態下拉式選單:三框連動(三層樹狀選項)

房東:妮仔
發表時間:2010-01-29
[檢舉]


<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>動態下拉式選單:三框連動(三層樹狀選項)</h2>
<hr>

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

function dataHierarchy(){
// 國語歌手
var mandarin=new Array();
var i=0;
mandarin[i++]=new node("張學友", ["我等到花兒也謝了", "一千個傷心的理由

", "咖啡"]);
mandarin[i++]=new node("張惠妹", ["聽海", "剪愛", "原來你什麼都不要", "

三天三夜"]);
mandarin[i++]=new node("劉德華", ["謝謝你的愛", "來生緣", "忘情水"]);
mandarin[i++]=new node( "伍佰", ["浪人情歌", "樹枝孤鳥"]);
mandarin[i++]=new node("周華健", ["花心", "心的方向"]);
// 英語歌手
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"]);
// 語言類別
var output=new Array();
var i=0;
output[i++]=new node("國語", mandarin);
output[i++]=new node("英語", english);

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].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();
}

// 第一個欄位被更動後的反應動作
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>歌曲語言<th>歌星名字<th>歌曲清單
<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>路徑:<input type=text name=path

size=60></td></tr>
</table>
</form>

<hr>
</body>
</html>


範例 http://neural.cs.nthu.edu.tw/jang/books/JavaScript/example/dynamicListBox03.htm



  • J2H贊助網站            在此刊登廣告

    廣利不動產-新板特區指名度最高、值得您信賴的好房仲
    您的托付,廣利用心為您服務
    廣利不動產-板橋在地生根最實在--新板特區指名度最高、值得您信賴的好房仲
    完整房訊,房屋、店面熱門精選物件,廣利不動產 優質仲介,房屋租賃、買賣資訊透明,交易真安心!

  • 1 樓住戶:makoto
    發表時間:2017-03-11
    [檢舉]

    請問這個程式碼如果要改成4框連動 要如何修改



     共 1 人回應  選擇頁數 【第1 頁】 

    回應主題
    ※注意 
    1. 抱歉,您的網頁未支援Cookie,此網頁將無法正常執行請檢查您電腦瀏覽器關於cookie的設定。設定方法說明
    2. 必須由首頁登入 J2H 流行雜誌