AttachXMLForSelect:XML自動關聯多級SELECT選單程式碼和例子 (轉)
/Expert/TopicView1.?id=933535">
/*
關聯到1個到N個的
沒有做歷史記錄
*/
function AttachXMLForSelect(xd,arr,defaultText,defaultValue)//xd:xml,arr:array of select
{
function EnsureString(str)
{
if(typeof(str)=="string")return str;
if(str==null)return "";
try{return str+"";}catch(x){}
return "";
}
defaultText=EnsureString(defaultText);
defaultValue=EnsureString(defaultValue);
//檢查引數
if(xd==null||xd.documentElement==null||arr==null||arr.length==0)
throw(new Error(-1,"invalid arguments"));
//轉換成內部的xd
(function(xmldom){
xd=new (".XMLDOM");
xd.loadXML(xmldom.xml);
})(xd)
//把Select釋放掉,換成uniqueID來儲存
for(var i=0;i
uniqueID:arr[i].uniqueID
,
node:null //當前關聯的XML Node
,
attach:false //當前是否關聯到OnSelectChange
};
//把第一個Select相關的XML node設定為XML的根元素
arr[0].node=xd.documentElement;
//關聯第一個Select
ReAttachNode(0);
var Controller={
HandleChange:HandleChange
};
return Controller;
//響應操作
function OnSelectChange(event)
{
HandleChange(event.srcElement);
}
//處理Select可能被修改的情況,確認後面的Select正常
function HandleChange(s)
{
//取得Select在arr中的位置
for(var index=0;index
if(s.uniqueID==arr[index].uniqueID)
break;
}
//如果不是最後一個Select
if(index
var node=arr[index].node;
//關聯下一個Select相關的XML node
if(node)
{
var xns=node.selectNodes("item");
arr[index+1].node=xns.item(s.selectedIndex);
}
else arr[index+1].node=null;
//關聯下一個Select
/*關聯遞迴處*/
ReAttachNode(index+1);
}
}
//關聯,重關聯一個Select到指定的node
function ReAttachNode(index)
{
//取當前關聯的node
var node=arr[index].node;
var pnode=null;
if(index>0)pnode=arr[index].node;
//取當前Select
var s=document.getElementById(arr[index].uniqueID);
//清楚當前Select的內容
s.innerHTML="";
//如果有defaultText,那麼設定一項
if((node==null||node.selectNodes("item").length==0)&&defaultText)
{
var o=document.createElement("OPTION");
o.value=defaultValue;
o.innerText=defaultText;
s.appendChild(o);
}
//如果關聯的node為空,那麼取消事件關聯
if(node==null)
{
if(arr[index].attach)
{
s.detachEvent("onchange",OnSelectChange);
arr[index].attach=false;
}
/*關聯遞迴處*/
HandleChange(s);
return;
}
//如果node不為空
//重新關聯事件
if(arr[index].attach==false)
{
s.attachEvent("onchange",OnSelectChange);
arr[index].attach=true;
}
//把子node的值倒入到Select中
var xns=node.selectNodes("item");
for(var i=0;i
var o=document.createElement("OPTION");
o.value=xns.item(i).getAttribute("value");
o.innerText=xns.item(i).getAttribute("text");
s.appendChild(o);
}
//這個。。。可能不需要吧。。。
if(s.options.length)
s.selectedIndex=0;
/*關聯遞迴處*/
HandleChange(s);
}
}
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/10752043/viewspace-992793/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- select下拉選單多級級聯效果程式碼例項
- 動態生成select三級聯動選單程式碼例項
- select下拉選單二級聯動
- select下拉選單級聯效果例項程式碼
- select級聯下拉選單程式碼例項分析
- jquery select選中表單特效三級聯動jQuery特效
- 幾行程式碼實現ListView的多級聯動——多級聯動就是如此簡單行程View
- select下拉選單跳轉效果程式碼
- jQuery 省市級聯選單程式碼例項jQuery
- js省市級聯選單程式碼例項JS
- select下拉選單實現分類級聯效果
- js例子-二級聯動JS
- jQuery操作select下拉選單程式碼jQuery
- elementUI 多級選單動態渲染UI
- jQuery操作select下拉選單常用程式碼jQuery
- select下拉選單美化程式碼例項
- 自關聯和動態group by
- 關於XML序列化的簡單例子XML單例
- 垂直樹形多級導航選單程式碼例項
- 刪除和新增select下拉選單option項程式碼例項
- jQuery美化select下拉選單程式碼例項jQuery
- jQuery操作select下拉選單程式碼例項jQuery
- 模擬select下拉選單程式碼例項
- PHP的開合式多級選單程式PHP
- 如何設定select下拉選單可以多選
- 轉 轉別人寫的用dwr做聯動選單的例子,自己覺得也不錯
- CSS多級選單CSS
- 關聯自己的應用程式到右鍵選單中 (轉)
- VC++的選單控制和自繪選單。 (轉)C++
- javascript新增和刪除select下拉選單option項程式碼例項JavaScript
- 微信小程式--手寫一個地區選擇器(多級聯動)微信小程式
- 出生日期三級聯動下拉選單
- 原生javascript操作select下拉選單程式碼例項JavaScript
- 模擬美化select下拉選單程式碼例項
- 基於 mpvue 框架的小程式選擇元件,支援單列,多列,級聯Vue框架元件
- Android實現三級聯動下拉框 下拉選單spinner的例項程式碼Android
- 選擇select下拉選單網頁跳轉網頁
- JavaScript 省市級聯選單原理JavaScript