<!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>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<h2>无限级 select demo2</h2>
<div id="demo2" style="360px; padding:5px; border:3px solid #000; float:left">
</div>
<input type="text" id="txt_value" />
<input type="text" id="txt_text" />
</body>
</html>
<script type="text/javascript">
_doc = document;
var Doc = {};
Doc.Create = function (tagName) {
return _doc.createElement(tagName);
}
Doc.Append = function (dom) {
_doc.body.appendChild(dom);
}
Doc.Get = function (_id) {
return _doc.getElementById(_id);
}
//无限级 select 分类
function Select(arr, chg,callback) {
//获得子类 集合（select）
var getSel = function (pid) {
var _select = Doc.Create("select");
_select.options.add(new Option('选择分类', ""));
for (var i = 0; i < arr.length; i++) {
if (arr[i].pid == pid) {
_select.options.add(new Option(arr[i].name, arr[i].id));
}
}
var delChildfun = function (obj) {
if (obj.child) {
var _child = obj.child;
if (_child.parentNode) {
_child.parentNode.removeChild(_child);
}
delChildfun(_child);
}
}
_select.onchange = function () {
delChildfun(this);
this.child = getSel(this.options[this.selectedIndex].value);
chg(this.child);
callback(this.options[this.selectedIndex]);
}
return _select;
}
//===================获得节点
var r_arr = [];
var getPidById = function (id) {
for (var i = 0; i < arr.length; i++)
if (arr[i].id == id) return arr[i].pid;
return -1;
}
var getSelBySid = function (sid) {
var pid = getPidById(sid);
var sel = getSel(pid);
for (var i = 0; i < sel.options.length; i++) {
if (sel.options[i].value == sid) {
sel.selectedIndex = i; break;
}
}
if (pid > 0) getSelBySid(pid);
r_arr.push(sel);
}
this.getDom = function (selectid) {
getSelBySid(selectid || arr[0].id);
for (var i = 0; i < r_arr.length; i++)
if (i + 1 < r_arr.length)
r_arr[i].child = r_arr[i + 1];
return r_arr;
}
}
/**==============demo==============**/
var data = [
{ id: 1, name: "前端开发", pid: 0 },
{ id: 2, name: "CSS", pid: 1 },
{ id: 3, name: "JS", pid: 1 },
{ id: 4, name: "HTML", pid: 1 },
{ id: 5, name: "数据库", pid: 0 },
{ id: 6, name: "SQLServer", pid: 5 },
{ id: 7, name: "MYSql", pid: 5 },
{ id: 8, name: "Oracle", pid: 5 },
{ id: 9, name: "PLSQL", pid: 8 }
];
var demo2 = Doc.Get("demo2");
var chg = function (obj) {
if (obj.options.length > 1) {
obj.selectedIndex = 0;
demo2.appendChild(obj);
}
}
var sel2 = new Select(data, chg, function (obj) {
$("#txt_value").val(obj.value);
$("#txt_text").val(obj.text);
});
var _arr = sel2.getDom(9);
for (var i = 0; i < _arr.length; i++) {
demo2.appendChild(_arr[i]);
}
/**==============demo==============**/
</script>