该内容是在网上找的 只是将data修改为了动态的而已 O(∩_∩)O~
jsp 页面:
行业:<select id="myselect"> </select>
<script language=javascript type="text/javascript">
var ts = new TreeSelector(document.getElementById("myselect"), data, 0);
ts.createTree();
</script>
js:
var data = new Array();
var i=0;
var temp;
<c:forEach items="${industries}" var="m"> //后台获取的数据库中的数据
data[i] = {id: '${m.industryId}',pid: '${m.superiorIndustry}',text: '${m.industryName}'};
i=i+1;
</c:forEach>
function TreeSelector(item, data, rootId) {
this._data = data;
this._item = item;
this._rootId = rootId;
this._item.options.add(new Option('无', -1));//如果是顶级目录
}
TreeSelector.prototype.createTree = function() {
var len = this._data.length;//获取数据的长度
for (var i = 0; i < len; i++) {
if (this._data[i].pid == this._rootId) {
this._item.options.add(new Option(this._data[i].text, this._data[i].id));
for (var j = 0; j < len; j++) {
this.createSubOption(len, this._data[i], this._data[j]);
}
}
}
}
TreeSelector.prototype.createSubOption = function(len, current, next) {
var blank = "";
if (next.pid == current.id) {
intLevel = 0;
var intlvl = this.getLevel(this._data, this._rootId, current);
for (a = 0; a <= intlvl; a++) blank += "....";
this._item.options.add(new Option(blank + next.text, next.id));
for (var j = 0; j < len; j++) {
this.createSubOption(len, next, this._data[j]);
}
}
}
TreeSelector.prototype.getLevel = function(datasources, topId, currentitem) {
var pid = currentitem.pid;
if (pid != topId) {
for (var i = 0; i < datasources.length; i++) {
if (datasources[i].id == pid) {
intLevel++;
this.getLevel(datasources, topId, datasources[i]);
}
}
}
return intLevel;
}