Javascript 生成無限下拉列表實現代碼

2024-05-06 14:15:49

字體：大中小

來源：轉載

供稿：網友

代碼如下:
//公司二維數組數據源
Office = [
["Dept", "ParentDept"],
["業務部", "0"],
["技術部", "0"],
["市場部", "0"],
["www.yongfa365.com", "業務部"],
["業務部小楊", "業務部"],
["業務部小菜", "業務部"],
["技術部老柳", "技術部"],
["技術部老楊", "技術部"],
["技術部老菜", "技術部"],
["市場部柳先生", "市場部"],
["市場部楊先生", "市場部"],
["市場部菜鳥", "市場部"]
]

//省市三維數組數據源
City3 = [
["Dept", "ParentId", "Id"],
["北京", "0", "010"],
["山西", "0", "0359"],
["朝陽區", "010", "001"],
["海淀區", "010", "002"],
["豆各莊", "001", "101"],
["十里堡", "001", "102"],
["中關村", "002", "201"],
["上地", "002", "202"],
["運城地區", "0359", "301"],
["太原市", "0359", "302"],
["永濟市", "301", "311"],
["小區", "302", "312"]
];

//FillSelectTree("nowhaha", City3, "0", "311", -1)
//Select控件ID,數據源,父級值,選中值,第幾級（用來產生分隔符）
function FillSelectTree(SelectId, ArrObj, ParentValue, SelectedValue, NowI) {
StrObj = eval(document.getElementById(SelectId));

NowI++;

//判斷它是二級數據源，還是三級
if (ArrObj[0].length == 2)
{ ArrNum = 0; }
else
{ ArrNum = 2; }

//生成所有Option
for (var i = 0; i < ArrObj.length; i++) {
if (ArrObj[i][1] == ParentValue) {
StrObj.options[StrObj.length] = new Option(String("　　", NowI) + ArrObj[i][0], ArrObj[i][ArrNum]);

//選中默認值
if (ArrObj[i][ArrNum] == SelectedValue) {
StrObj.options[StrObj.length - 1].selected = true;
}

//遍歷
FillSelectTree(SelectId, ArrObj, ArrObj[i][ArrNum], SelectedValue, NowI);
}
}
}

//復制字符串多少次
function String(str, nowi) {
strtemp = "";
for (var i = 0; i < nowi; i++) {
strtemp += str;
}
return strtemp;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <hr /> <select id="nowhaha"> </select> <select id="NowOffice"> </select> </body> </html>
[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]